在Webpack模块中解析SCSS文件

Question

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                                                                                                                             

Answer 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
        ]
    }
}

添加您的解析配置，您就可以开始工作了。但一定要保持样式的巴别塔转换(如果您正在使用它)与css-loader的localIdentName保持同步。