webpack：将全局styles文件导入所有组件

Question

I am newbie to webpack, I have a global styles defined in one file called common.scss, I want these styles to be imported in every component.

here is my webpack.config.js :

const webpack = require('webpack');
const path = require('path');

var production = process.env.NODE_ENV === 'production';
const ExtractCssChunks = require("extract-css-chunks-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: production ? "production" : "development",

    entry: [
        'webpack-hot-middleware/client',
        path.join(__dirname, '/src/index.js'),
    ],

    output: {
        publicPath: "/",
        path: path.resolve(__dirname, "build"),
        filename: "bundled.js"
    },

    devtool: '#cheap-module-eval-source-map',

    resolve: { extensions: ['.js', '.jsx'] },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        }),
        new ExtractCssChunks(
            {
                filename: "[name].css",
                chunkfilename: "[name].css",
            }
        ),
    ],

    module: {
        rules: [
            {
                test: /\.js?$/,
                use: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.(sass|scss)$/,
                use: [
                    {
                        loader: ExtractCssChunks.loader,
                        options: {
                            hot: production ? false : true,
                            modules: false,
                            reloadAll: true
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                    'postcss-loader',
                    'sass-loader',
                    {
                        loader: 'sass-resources-loader',
                        options: {
                            resources: [
                                path.join(__dirname, './src/styles/colors.scss'),
                                path.join(__dirname, './src/styles/common.scss'),
                            ],
                        },
                    }
                ],
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
                loader: 'url-loader?limit=100000'
            },
            {
                test: /\.mp4$/,
                use: 'file-loader?name=videos/[name].[ext]',
            },
        ],
    },
};

MyApp/src/styles/common.scss:

.no-padding-h{
    padding-left: 0px;
    padding-right: 0px;
}

MyApp/src/styles/colors.scss:

$main_white: #fff;

the colors.scss file is applied everywhere in my components styles, but unfortunately the common.scss styles are not applied.

Answer 1

This is how I config my webpack. You can find it here

plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    }

Then you just need to import the common.scss file inside your js like this

import "common.scss";

Make sure to update to the correct path.