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中删除了样式加载器，从而解决了该问题。

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

1 个答案: