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

Question

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

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

{
    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 加载器

yarn add sass-loader node-sass –dev