解析 Webpack 模块中的 SCSS 文件答案

【问题标题】：Resolve SCSS File in Webpack Modules解析 Webpack 模块中的 SCSS 文件
【发布时间】：2019-07-03 18:23:58
【问题描述】：

webpack.config.js

const styles = path.join(__dirname, "client/styles.scss");

module.exports = {
       resolve: {
          modules: [..., styles]
       }
    }

file.js

import base from "styles"; 

<div styleName="base.x">
...

</div>

错误：

Module build failed (from ./node_modules/babel-loader/lib/index.js):                                                                             
Error: CSS module import does not exist: base                                                                                                    
    at getClassNameForNamespacedStyleName (\node_modules\babel-plugin-react-css-modules\dist\getClassN
ame.js:36:13)                                                                                                                                    
    at styleNameValue.split.filter.map.styleName (\node_modules\babel-plugin-react-css-modules\dist\ge
tClassName.js:68:14)                                                                                                                             
    at Array.map (<anonymous>)                                                                                                                   
    at exports.default (\node_modules\babel-plugin-react-css-modules\dist\getClassName.js:66:6)       
    at exports.default (\node_modules\babel-plugin-react-css-modules\dist\resolveStringLiteral.js:23:5
6)                                                                                                                                               
    at PluginPass.JSXElement (\node_modules\babel-plugin-react-css-modules\dist\index.js:193:48)      
    at newFn (\node_modules\@babel\traverse\lib\visitors.js:193:21)                                   
    at NodePath._call (\node_modules\@babel\traverse\lib\path\context.js:53:20)                       
    at NodePath.call (\node_modules\@babel\traverse\lib\path\context.js:40:17)                        
    at NodePath.visit (\node_modules\@babel\traverse\lib\path\context.js:88:12)                       
 @ ./client/routes.js 1:385-429 1:1128-1133                                                                                                      
 @ ./client/index.js

【问题讨论】：

使用sass-loader - github.com/webpack-contrib/sass-loader
@BugsArePeopleToo 已经是。 { 测试：/\.(scss)$/，使用：[ styleLoader，{ loader：“css-loader”，选项：{ importLoaders：1，模块：true，localIdentName：“[path]___[name]__[local ]___[hash:base64:5]" } }, "sass-loader" ] },

标签： javascript css reactjs webpack sass

【解决方案1】：

以下代码摘自我的一个 webpack 项目。它基本上编译/监视任何scss 和css 文件。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const process = require('process');


module.exports = {
    module: {
        rules: [
            // ... more
            {
                test: /\.(scss|css)$/,
                use: [
                    process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                        }
                    }, 
                    {
                        loader: "sass-loader",
                        options: {
                            data: "$env: " + process.env.NODE_ENV + ";"
                        }
                    }
                ],
            },

            // ... more
        ]
    }
}

添加您的解析配置，您应该一切顺利。但一定要保持样式的 Babel 转换（如果你正在使用它）与 css-loader 的localIdentNames 同步。

【讨论】：

我有一个几乎相同的 webpack 设置。
您的 scss 文件中是否还有一个类 .base？如果您调试它，您的 Javascript base 对象有哪些键和值？
键是文件中的选择器，值如下所示：[path]___[name]__[local]___[hash:base64:5]
你的 Babel 配置可能有问题。否则您可以使用<div className={base.x}>。你能用 JS 加载器和 Babel 配置更新你的问题吗