Webpack 没有在反应组件中提取 scss 文件的导入

Question

我想使用每个组件的 scss 文件设置我的 react 项目。因此，给定一个名为 PermissionPicker 的组件，我想在 jsx 文件中导入 PermissionPicker.scss。

在我当前的设置下，webpack 加载器仅在导入到我的入口点 (boot-client.tsx) 时加载 scss 文件。在我的 PermissionPicker 组件中导入 './PermissionPicker.scss' 会导致 webpack 错误：

模块解析失败：PermissionPicker.scss 意外令牌 (1:1) 您可能需要适当的加载程序来处理此文件类型。

我的印象是我可以在项目中的任何地方导入 scss，类似于 create-react-app 的工作方式。

任何建议都会很棒！

下面是我的 webpack 配置。

const sharedConfig = () => ({
stats: { modules: false },
resolve: { extensions: [ '.js',  '.ts', '.tsx', '.jsx' ] },
output: {
    filename: '[name].js',
    publicPath: '/dist/' /
},
module: {
    rules: [
        { test: /\.tsx?$/, include: /client/, use: 'babel-loader' },
        { test: /\.tsx?$/, include: /client/, use: 'awesome-typescript-loader?silent=true' }
    ]
},
plugins: [new CheckerPlugin()]
});

const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig(), {
    entry: { 'main-client': './client/boot-client.tsx' },
    module: {
        rules: [
            { test: /\.css$/, use: ExtractTextPlugin.extract({ use: 'css-loader' }) },
            { test: /\.scss$/, use: ExtractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    fallback: "style-loader"
                })
            },
            { test: /\.(png|jpg|jpeg|gif|svg)(\?\S*)?$/, use: 'url-loader?limit=25000' }
        ]
    },
    output: { path: path.join(__dirname, clientBundleOutputDir) },
    plugins: [
        new ExtractTextPlugin('site.css'),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        })
    ].concat(isDevBuild ? [
        new webpack.SourceMapDevToolPlugin({
            filename: '[file].map',
            moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]')
        })
    ] : [
    ])
    });

Answer 1

你需要安装node-sass和sass-loader，因为sass-loader需要node-sass作为peerDependency

npm install sass-loader node-sass --save-dev

还缺少include: join(__dirname, 'src')

rules: [
        { 
          test: /\.css$/, 
          include: join(__dirname, 'src'),
          use: ExtractTextPlugin.extract({ use: 'css-loader' }) 
        },
        { 
          test: /\.scss$/, 
          include: join(__dirname, 'src'),
          use: ExtractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                fallback: "style-loader"
          })
        },
        { test: /\.(png|jpg|jpeg|gif|svg)(\?\S*)?$/, use: 'url-loader?limit=25000' }
    ]

src是Components的通用路径，需要从你的配置文件路径中注明路径