webpack: импортировать файл глобальных стилей во все компоненты

Question

Я новичок в веб-пакете, у меня есть глобальные стили, определенные в одном файле с именем common.scss, я хочу, чтобы эти стили были импортированы в каждый компонент.

вот мой 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;

файл colors.scss применяется везде в стилях моих компонентов, но, к сожалению, стили common.scss не применяются.

Answer 1

Так я настраиваю свой веб-пакет. Вы можете найти его здесь

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"
                    }
                ]
            }
        ]
    }

Тогда вам просто нужно импортировать файл common.scss внутри вашего js, как этот

import "common.scss";

Убедитесь, что вы обновили доправильный путь.