Question

我正在尝试导入scss并在react-css-themr中使用它，所以当我不使用它们时，这个导入工作正常：import "style/Sample.scss"，但现在我需要将它存储在一个对象中在它们中使用它所以我试着称之为：import * as SampleTheme from "style/Sample.scss"＆amp;这给出了错误Cannot find module，我在终端本身得到这个错误，所以构建过程没有经历。我也试过了const SampleTheme = require("style/Sample.scss")，但这给了我一个空白的对象。

有些人说它的webpack配置有问题，但我对它不太确定，因为在IDE中，当我将鼠标悬停在此时，我可以看到相同的问题＆amp;直到那时webpack甚至没有运行，仍然是我的webpack配置为scss：

{
    test: /\.scss$/,
    use: [
        {
            loader: 'style-loader'
        }, {
            loader: 'css-loader',
            options: {
                importLoaders: 1,
                sourceMap: false,
            }
        }, {
            loader: 'sass-loader',
            options: {
                includePaths: [
                    path.join(__dirname, 'src'),
                    path.join(__dirname, 'src', 'styles'),
                    path.join(__dirname, 'src', 'styles', 'components'),
                ],
                sourceMap: false
            }
        }, {
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    './node_modules/engage-ui/src/styles/foundation.scss',
                    './node_modules/engage-ui/themes/Delicious/foundation.scss',
                    './node_modules/engage-ui/src/styles/shared.scss',
                    './node_modules/engage-ui/themes/Delicious/shared.scss',
                ],
            },
        },
    ],
    exclude: /node_modules/
},

Answer 1

module.exports = {
...
  module: {
    rules: [{
        test: /\.scss$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "sass-loader" // compiles Sass to CSS
        }]
    }]
  }
};

和添加sass loader

yarn add sass-loader node-sass -dev

在反应中导入scss：找不到模块scss

1 个答案: