javascript - 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-loader , css-loader , `sass-m
奇怪的是，这个完全相同的设置可以在另一个项目中正常工作。

Answer 1

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