CODEWITHSUNDEEP
javascriptcsswebpacklessbundling-and-minification
Perfection
Perfection

Reputation: 721

Webpack doesn't bundle less to css?

I tried various configurations. I managed to transpile my jsx code to a bundled JS, so that seems to work.

Now I'm trying to bundle my .less files into a single bundled .css file in the /wwwroot/

Every source I've tried to search online shows 1 of the 3 different sources that they've copied but I can get none of them to work.

How can I make webpack bundle my less files and bundle it into a single css file in /wwwroot/ ?

My file structure:

/wwwroot/ /* wwwroot, public files*/
/Content/css/ /* .less files */
/Content/jsx/ /* .jsx files */

My webpack configruation:

"use strict";
var glob = require("glob");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        app: glob.sync("./Content/*/*.jsx")
    },
    output: {
        filename: "./wwwroot/[name].min.js"
    },
    devServer: {
        contentBase: ".",
        host: "localhost",
        port: 9000
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: "babel-loader"
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({
                    use: "less-loader"
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "./wwwroot/[name].min.css"
        }),
    ],
};

Here is the output:

Version: webpack 2.5.1
Time: 322ms
               Asset     Size  Chunks             Chunk Names
./wwwroot/app.min.js  2.75 kB       0  [emitted]  app
   [0] ./Content/jsx/app.jsx 0 bytes {0} [built]
   [1] multi ./Content/jsx/app.jsx 28 bytes {0} [built]
Process terminated with code 0.

Upvotes: 0

Views: 656

Answers (1)

Ryan Tsui
Ryan Tsui

Reputation: 948

Add the fallback option for your ExtractTextPlugin, and css-loader in your list of loaders. Install style-loader with npm install --save-dev style-loader if you do not have it yet.

{
  test: /\.less$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'less-loader']
  })
}

Upvotes: 0

Related Questions