To get the css file out of the less file using webpack

Question

I am building a SPA with angular and webpack, And here i am also using less, so this can help with theming for the website later on. But the issue here is teh angular ui router only takes css file , i don't seem to find a css file that is generated on fly by the webpack. Any suggestions on how i can use the css from less while keeping in mind the theming option is also needed later on.

Any help appreciated and will help my work to get on track. Thanks!

Possible duplicate of [import .css file into .less file](http://stackoverflow.com/questions/11196915/import-css-file-into-less-file) — 3rdthemagical, Aug 05 '16 at 06:44

Finrod · Answer 1 · 2016-08-05T12:48:17.750

By default, webpack will include your every CSS files (from libs and generated) in a <style> tag in the index.html file.

You need some plugins to generate the CSS from your LESS file and extract CSS files as separate files:

Here is an extract of my webpack configuration file for the LESS/CSS part. I'm working with some CSS files from librairies which are concatenated in a libs.css and a main LESS file (which includes 20+ other LESS files) which is compiled in a style.css file.

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('libs.css');
var extractLESS = new ExtractTextPlugin('style.css');

module.exports = {
    ...
    module: {
        ...
        loaders: [{
            // load css without sourcemap
            test: /\.css$/,
            loader: extractCSS.extract(
                'css'
            )
        }, {
            // compile less with source maps
            test: /\.less$/,
            loader: extractLESS.extract(
                'css?sourceMap!less?sourceMap'
            )
        }]
    },
    plugins: [
        // extract inline css into separate files with sourcemaps
        extractCSS,
        extractLESS
    ],
    resolve: {
        alias: {
            ...
            'less': path.join(__dirname, 'src/less'),
            'css': path.join(__dirname, 'src/css'),
        }
    }
};

Finrod, so this will help me extract individual css files then. i am using these plugins , might be some configuration that i am missing which will help generate css for different pages from the less. It took away most of the time to just set the configuration. Can u guide through. Thanks! — Dpk_Gopi, Aug 05 '16 at 12:40
@Dpk_Gopi, I added a snippet of my `webpack.config.js` file. Hope this helps! — Finrod, Aug 05 '16 at 12:49

To get the css file out of the less file using webpack

1 Answers1