React - 导入非模块化 sass 文件返回空对象

Question

我正在尝试从文件中导入一些变量scss。一种是模块 ( *.module.scss)，一种不是。导入模块一时，我获取了对象中的变量。导入另一个时，我得到一个空对象。这两个scss文件是相同的。

这是我的scss文件：

:export {
    a: red;
}

我的index.tsx：

import styles from "./styles/test.module.scss";
import nonModularStyles from "./styles/test.scss";

console.log(styles); // {a: "red"}
console.log(nonModularStyles);  // {}

以下是我的规则webpack.config.js：

{
    test: /\.module\.s[ac]ss$/,
    loader: [
        "style-loader",
        {
            loader: "css-loader",
            options: {
                modules: true,
                sourceMap: true,
            },
        },
        {
            loader: "sass-loader",
            options: {
                sourceMap: true,
            },
        },
    ],
},
{
    test: /\.s([ac])ss$/,
    exclude: /\.module.(s(a|c)ss)$/,
    loader: ["style-loader", "css-loader", "sass-loader"],
},

我安装了style-loader,,, `sass sass-loader- css-loaderm

奇怪的是，这个完全相同的设置在另一个项目中运行良好。

Answer 1

我遇到了同样的问题，从 webpack.config.json 中删除 style-loader 解决了这个问题。