使用 webpack 进行 Sass 相对导入

Question

我正在尝试在同一文件夹中导入与组件相关的 SCSS 文件，但例如：

import './ngg.scss';

奇怪的是，当我更改此 SCSS 文件的路径或使用开发服务器时，它工作正常，但是当我为生产运行它时，它不起作用，就好像 SCSS 文件不存在一样，我正在使用web-pack 4，我真的看不到问题，因为有些组件使用相对导入并且工作正常，请帮助！！

module.exports = function makeWebpackConfig(options) {
    var BUILD = options.environment === 'prod';
    var DEV_SERVER = process.env.WEBPACK_MODE === 'watch';
    var config = {
        mode: BUILD ? 'production' : 'development',
        optimization: {
            chunkIds: 'named',
            moduleIds: 'hashed',
            namedModules: true,
            noEmitOnErrors: true,
            usedExports: true,
            splitChunks: {
                cacheGroups: {
                    commons: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendors',
                        chunks: 'all'
                    },
                    desktop: {
                        test: /Resources\/desktop\/assets\/js/,
                        name: 'common-desktop',
                        chunks: 'initial',
                        minChunks: 5
                    },
                    mobile: {
                        test: /Resources\/mobile\/assets\/js/,
                        name: 'common-mobile',
                        chunks: 'initial',
                        minChunks: 5
                    }
                }
            },
            minimizer: [
                new UglifyJsPlugin({
                    cache: true,
                    parallel: true
                })
            ]
        },
        entry: options.entry,
        resolve: {
            alias: options.alias,
            extensions: ['.js', '.jsx'],
            modules: ['node_modules']
        },
        output: {
            path: options.parameters.path ? options.parameters.path : __dirname + '/../../web/compiled/',
            publicPath: publicPath,
            filename: BUILD ? '[name].[contenthash].js' : '[name].[hash].js',
            chunkFilename: BUILD ? '[name].[contenthash].js' : '[name].[hash].js'
        },
        devServer: {
            disableHostCheck: true,
            overlay: {
                warnings: true,
                errors: true
            },
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        }
    };

    config.module = {
        rules: [
            {
                test: /\.jsx?$/i,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    minified: !DEV_SERVER,
                    cacheDirectory: DEV_SERVER,
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.(gif|png|jpe?g)(\?.*)?$/i,
                enforce: 'pre',
                loader: 'image-webpack-loader',
                options: options.parameters.image_loader_options || !DEV_SERVER ? {
                    optipng: {
                        optimizationLevel: 7,
                        progressive: true
                    }
                } : {
                        disable: true
                    }
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)(\?.*)?$/i,
                loader: 'file-loader',
                options: {
                    name: '[name].[hash].[ext]'
                }
            },
            {
                test: /\.(eot|ttf|woff|woff2)$/,
                loader: 'url-loader',
            },
            {
                test: /\.html$/i,
                loader: 'raw-loader'
            },
            {
                test: /\.(css|scss)$/i,
                use: [
                    DEV_SERVER ? 'style-loader' : MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: false,
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [
                                    autoprefixer({
                                        browsers: ['last 2 version']
                                    })
                                ];
                            }
                        }
                    },

                ]
            },
            {
                test: /\.scss$/i,
                loader: 'sass-loader?sourceMap',
                options: {
                    enforce: 'pre'
                }
            }
        ]
    };
    config.plugins = [
        new MiniCssExtractPlugin({
            filename: BUILD ? '[name].[id].[chunkhash].css' : '[name].[hash].css'
        }),
        new PostCssPipelineWebpackPlugin({
            suffix: 'critical',
            processor: postcss([
                criticalSplit({
                    output: criticalSplit.output_types.CRITICAL_CSS
                })
            ])
        }),
        new PostCssPipelineWebpackPlugin({
            suffix: 'rest',
            processor: postcss([
                criticalSplit({
                    output: criticalSplit.output_types.REST_CSS
                })
            ])
        }),
        new PostCssPipelineWebpackPlugin({
            suffix: 'min',
            processor: postcss([
                csso({
                    restructure: false,
                    comments: false
                })
            ]),
            map: {
                inline: false
            }
        }),
        new AssetsPlugin({
            filename: path.basename(options.manifest_path),
            path: path.dirname(options.manifest_path)
        }),
        new webpack.ProvidePlugin({
            React: "react",
            ReactDOM: "react-dom",
            $: "jquery",
            jQuery: "jquery"
        })
    ];
    if (BUILD) {
        config.devtool = 'nosources-source-map';
    } else {
        config.devtool = 'source-map';
    }

    return config;
};

Answer 1

下面是我的 webpack 配置

module: {
    rules: [{
            test: /\.scss$/,
            use: [
                'style-loader',
                MiniCssExtractPlugin.loader,
                {
                    loader: "css-loader",
                    options: {
                        minimize: true,
                        sourceMap: true
                    }
                },
                {
                    loader: "sass-loader"
                }
            ]
        }
    ]
}

然后在我的js中我只需要像这样导入

import "css/Client/client.scss";

你可以查看我的完整配置here