0

I have webpack file that looks like this (note - for now - I need to create both minified and not minified versions of assets - so this is not a mistake):

const path = require('path');
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const readSass = new ExtractTextPlugin({
    filename: "foo/bar/style.min.css"
});

    config = {
        entry: {
            "main": './main.js',
            "main.min": './main.js',
            "style.min": './style.scss'
        },
        watch: true,
        devtool: "source-map",
        output: {
            path: path.resolve(__dirname, '/dist'),
            filename: '[name].js'
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/i,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    options: {
                        presets: ['es2015', 'react'],
                        minified: true
                    }
                },
                {
                    test: /\.scss|css$/,
                    use: readSass.extract({
                        use: [{
                            loader: "css-loader", options: { minimize: true }
                        }, {
                            loader: "sass-loader"
                        }]
                    })
                }
            ],
        },
        plugins: [
            readSass,
            new UglifyJsPlugin({
                include: /\.min\.js$/
            })
        ],
    }

    module.exports = config;

Everything works as expected, but there's one thing that bugs me.

In a few of my .jsx files I have CSS modules being loaded from different third-party components, stuff like:

import 'react-plugin/react-plugin.css';

Of course my compiled js and css files do not contain these styles. They're lost on the way. All the css from style.scss are there, all the js from main.js and jsx included within it are there, but theses styles are not.

What am I doing wrong?

Wordpressor
  • 7,173
  • 23
  • 69
  • 108

3 Answers3

1

Can you see what happens when you include style-loader too, like so:

$ npm i -D style-loader

//... webpack.config.js
{
  test: /\.scss$/,
  use: [{
    loader: "style-loader"
  }, {
    loader: "css-loader"
  }, {
    loader: "sass-loader"
  }],
  exclude: /node_modules/
},

Edit: remove the exclude: /node_modules/ if you need to load files from there.

Then ensure you are importing it in your js entrypoint: import "../css/main.scss";

Exac
  • 53
  • 1
  • 2
  • 7
1

that is simply because you are using extract-text-webpack-plugin module. if you want to keep your sass in your bundle then modify your webpack config into this:

const path = require('path');
const webpack = require("webpack");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')


config = {
    entry: {
        "main": './main.js',
        "main.min": './main.js'
    },
    watch: true,
    devtool: "source-map",
    output: {
        path: path.resolve(__dirname, '/dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/i,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: ['es2015', 'react'],
                    minified: true
                }
            },
            {
                test: /\.scss|css$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ],
    },
    plugins: [
        readSass,
        new UglifyJsPlugin({
            include: /\.min\.js$/
        })
    ],
}

module.exports = config;

and instal sass-loader and style-loader by this command: npm install -D sass-loader style-loader

EDIT: I forgot to tell you, you have to include your css or sass before your js entry point like this 

require('path/to/your/main.scss')

ReactDOM.render(<App />, document.getElementById('root'))

so that it is bundled together AND you don't have to include your css in the webpack config entry point anymore.

Lelouch
  • 910
  • 6
  • 19
1

The sass required not declare yet?it's possible to use ./sass/**/*.css/\ on your test to call any css style translate from sass.

j.me
  • 17
  • 3