CODEWITHSUNDEEP
csslesswebpackwebpack-dev-server
Geraint
Geraint

Reputation: 3407

webpack output css file

I'm trying to get webpack to output a css file for my less instead of inline styles. I've been using the extract-text-webpack-plugin.

I've set it up based on the documentation and have had a look at similar questions on stackoverflow but can't figure out why my below webpack config file is not outputting a file or putting anything in index.html

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: [
      'webpack/hot/only-dev-server',
      './app/main.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
              test: /\.js?$/,
              loaders: ['react-hot', 'babel'],
              exclude: /node_modules/
            },
            {
              test: /\.js$/,
              exclude: /node_modules/,
              loader: 'babel-loader'
            },
            {
              test: /\.less$/,
              loader: ExtractTextPlugin.extract('style', 'css!less')
              //loader: "style!css!less"
            }
        ]
    },
    plugins: [
      new webpack.NoErrorsPlugin(),
      new ExtractTextPlugin('[name].css', {
            allChunks: true
        })
    ]

};

Upvotes: 1

Views: 1620

Answers (2)

shahar taite
shahar taite

Reputation: 472

From what i understand use the loader as such:

{
   test: /\.less$/,
   loaders: ['style', 'css', 'less']
}

installing both css-loader, style-loader and less-loader via npm. in your entry point, require the less files you want and they will be applied as styles to your index.html file. No need to add any html tags.

Upvotes: 0

Jonathan Petitcolas
Jonathan Petitcolas

Reputation: 4584

In current state, indeed, you need to embed your CSS manually.

However, if you use HTML Webpack Plugin (and I strongly recommend it (-:), it will be automatically injected, as explained by documentation:

If you have any css assets in webpack's output (for example, css extracted with the ExtractTextPlugin) then these will be included with <link> tags in the HTML head.

Upvotes: 2

Related Questions