Question

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

使用我当前的设置，webpack加载器仅在我的入口点（boot-client.tsx）中导入时加载scss文件。 import＆＃39; ./ PermissionPicker.scss＆＃39;在我的PermissionPicker组件中导致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

您需要使用<table> <tr> <td><input type="radio" name="r1c1" value="TRUE"></td> <td><input type="radio" name="r1c1" value="FALSE"></td> </tr> <tr> <td><input type="radio" name="r1c2" value="TRUE"></td> <td><input type="radio" name="r1c2" value="FALSE"></td> </tr> <input type="button" name="sbmt" value="CHECK" onclick="cross();"> </table>安装node-sass，因为sass-loader需要node-sass作为peerDependency

sass-loader

并遗漏了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' } ]是组件的通用路径，您需要指明配置文件路径中的路径

Webpack没有在react组件中获取scss文件的导入

1 个答案: