时间戳

首页 > 解决方案 > webpack：将全局样式文件导入所有组件

css - webpack：将全局样式文件导入所有组件

问题描述

我是 webpack 的新手，我在一个名为 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 样式没有应用。

标签： cssnode.jsreactjswebpacksass

解决方案

这就是我配置我的 webpack 的方式。你可以在这里找到

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

然后你只需要像这样在你的js中导入common.scss文件

import "common.scss";

确保更新到正确的路径。

推荐阅读