Scss files not get compiled

Question

I have scss files under src/css and want to compile it through webpack. It seems not working. What's the possible root cause? Thanks

    var webpack = require('webpack');
    var path = require('path');
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    var CopyWebpackPlugin = require('copy-webpack-plugin');
    var HtmlWebpackPlugin = require('html-webpack-plugin');

    const extractCustomCss = new ExtractTextPlugin('./custom.css');

    const scssCompileOption = {
        test: /\.scss$/,
        include: [
            path.resolve(__dirname, 'src/css')
        ],
        loader: ExtractTextPlugin.extract({
            use: [{
                loader: 'css-loader'
            }, {
                loader: 'sass-loader'
            }],
            fallback: 'style-loader'
        })
    }


    module.exports = {
        entry: {
            index: "./src/App.tsx"
        },
        output: {
            path: path.join(__dirname, "/dist/"),
            filename: "[name].js"
        },

        devtool: 'source-map',
        resolve: {
            extensions: ['.ts', '.tsx', '.js', '.json', '.scss']
        },

        module: {
            loaders: [
                {test: /\.json$/, exclude: /node_modules/, loader: 'json'},
            ],
            rules: [
                scssCompileOption

            ]
        },
        devServer: {
            stats: 'errors-only',
            hot: true
        },
        plugins: [
            extractCustomCss
        ]
        // target: 'node'
    };

score 1 · Answer 1 · answered Feb 28 '18 at 08:20

I highly suggest using Compass for all the css preprocessor compilations (e.g less, sass or scss).

Download Compass via Ruby:

$ gem update --system
$ gem install compass

Afterwards access your files directory,

cd your/file/directory

And set up the Compass environment:

compass init
compass watch

Now all your .scss/.sass/etc.. extension files are compiled.

For future instructions please visit these references, or ask me!

How to install Compass Compass documentation

Scss files not get compiled

1 Answers1