CODEWITHSUNDEEP
csslessthemeswebpack
Dpk_Gopi
Dpk_Gopi

Reputation: 267

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

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!

Upvotes: 1

Views: 2565

Answers (1)

Finrod
Finrod

Reputation: 2550

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'),
        }
    }
};

Upvotes: 1

Related Questions