webpack：导入的样式是一个空对象答案

【问题标题】：webpack: Imported style is an empty objectwebpack：导入的样式是一个空对象
【发布时间】：2021-06-02 13:08:14
【问题描述】：

这是我的 webpack 配置，但我正在尝试导入我在 :export 块中声明的 scss 样式，但我得到一个空 JSON。

不出所料，还有其他人遇到同样的问题：

config.webpack.js

{
    test: /\.(css|scss|sass)$/,
    exclude: /node_modules/,
    use: [
        'style-loader',
        {
            loader: MiniCssExtractPlugin.loader,
        },
        'css-loader',
        'resolve-url-loader',
        'sass-loader',
        {
            loader: 'postcss-loader',
            options: {
                ident: 'postcss',
                plugins: [require('autoprefixer')()],
            },
        },
    ],
}

感谢任何帮助或提示。

【问题讨论】：

“我在:export 块中声明” - 你能澄清你的意思吗？你能分享你的导入和导出的确切语法吗？

标签： webpack webpack-style-loader sass-loader

【解决方案1】：

尝试将.module. 放入您的 scss 文件名中。

例如：filename.module.scss

然后在你的代码中：

import styles from "./filename.module.scss";

你可以使用你的 scss 的类：

<div className={styles.yourClassStyle}></div>

【讨论】：