webpack output css file

Question

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
        })
    ]

};

It won't automatically add the css file to index.html, you have to add it manually. For example, in your index.html, you would have to add <link href='/dist/main.css' rel='stylesheet' type='text/css'> (the href path would simply be your output.publicPath + [name].css where [name] is your bundle name (in this case main)) — trekforever
– trekforever, Commented Oct 30, 2015 at 22:42

Mr Lister · Accepted Answer · 2016-03-08 12:48:43Z

2

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.

edited Mar 8, 2016 at 12:48

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Mar 3, 2016 at 11:50

Jonathan Petitcolas

4,6445 gold badges34 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shahar taite · Accepted Answer · 2016-07-02 11:02:38Z

0

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.

answered Jul 2, 2016 at 11:02

shahar taite

4726 silver badges11 bronze badges

Collectives™ on Stack Overflow

webpack output css file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related