Webpack 5 和 css-loader 没有从 CSS 模块编译 @value 指令答案

【问题标题】：Webpack 5 and css-loader aren't compiling @value directive from CSS ModulesWebpack 5 和 css-loader 没有从 CSS 模块编译 @value 指令
【发布时间】：2022-08-04 03:09:39
【问题描述】：

我们有一个带有 Webpack 5 的 React 应用程序。有一些 .scss 文件正在使用 CSS 模块中的 @value 指令从安装在 node_modules 中的组件库中导入值。在 css-loader 第 3 版之前一切正常，但我们将 css-loader 升级到了最新版本 (6.7.1)，现在这些值不会在最终代码中编译。在我们获得这些变量的实际值（十六进制颜色值）之前，现在我们获得带有某种前缀和后缀的变量名称。

在我们得到之前：

.my-class {
  background: #5efa0b;
}

对于 @value brightGreen: #5efa0b; 在 color.css 文件中导入的 .scss 文件。现在我们得到：

.my-class {
  background: i__const_brightGreen_135;
}

.scss 文件如下：

@value brightGreen from \'~@MyComponentsLibrary/src/Styles/colors.css\'

.my-class {
  color: brightGreen;
}

colors.css 类似于：

@value brightGreen: #5efa0b;
@value brightBlue: #4664ec 

//more colors

实际的 Webpack 配置是这样的：

const path = require(\'path\');
const webpack = require(\'webpack\');
const packageJson = require(\'./package.json\');

module.exports = {
  entry: {
    bundle: [\'whatwg-fetch\', \'@babel/polyfill\', \'./src/js/index.js\'],
    depVersions: \'./src/depVersions\'
  },
  resolve: {
    // allows importing without file extension for these
    extensions: [\'*\', \'.js\', \'.json\', \'.jsx\'],
    modules: [path.resolve(__dirname, \'./src/js\'), \'node_modules\'],
    fallback: {
      \'os\': require.resolve(\'os-browserify/browser\'),
      \'buffer\': require.resolve(\'buffer\')
    }
  },
  output: {
    path: path.resolve(__dirname, \'build\'),
    filename: \'[name].js\',
    libraryTarget: \'umd\'
  },
  externals: {
    \'@MyComponentsLibrary\': \'components-library\',
    \'react\': \'react\',
    \'react-dom\': \'react-dom\'
  },
  module: {
    rules: [
      {
        test: /\\.jsx?$/,
        loader: \'babel-loader\',
        include: [path.resolve(__dirname, \'src/\')]
      },
      {
        test: /\\.s[ac]ss$/i,
        use: [
          \'style-loader\',
          {
            loader: \'css-loader\',
            options: {
              importLoaders: 2,
            }
          },
          {
            loader: \'postcss-loader\',
            options: {
              postcssOptions: {
                plugins: [
                  \'postcss-modules-values\'
                ]
              },
            }
          },
          {
            loader: \'sass-loader\',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\\.woff(\\?v=[0-9]\\.[0-9]\\.[0-9])?$/,
        type: \'asset\',
        parser: {
          dataUrlCondition: {
            maxSize: 10000
          }
        },
        generator: {
          dataUrl: {
            mimetype: \'application/font-woff\'
          }
        }
      },
      {
        test: /\\.(ttf|eot|svg)(\\?v=[0-9]\\.[0-9]\\.[0-9])?$/, 
        type: \'asset\'
      },
      { 
        test: /\\.(png|jpg)$/, 
        type: \'asset\',
        parser: {
          dataUrlCondition: {
            maxSize: 8192 // inline base64 URLs for <=8k images, direct URLs for the rest
          }
        }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      \'process.env\': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV || \'development\'),
        \'npm_package_name\': JSON.stringify(packageJson.name),
        \'npm_package_version\': JSON.stringify(packageJson.version)
      }
    }),
  ]
}

这些是安装的相关软件包的版本。

    \"my-components-library\": \"2.2.0\",
    \"css-loader\": \"6.7.1\",
    \"os-browserify\": \"^0.3.0\",
    \"sass\": \"^1.53.0\",
    \"sass-loader\": \"^13.0.2\",
    \"style-loader\": \"^3.3.1\",
    \"webpack\": \"^5.73.0\",
    \"webpack-cli\": \"^4.10.0\",
    \"webpack-dev-server\": \"3.11.3\",
    \"webpack-merge\": \"^5.8.0\"
    \"bootstrap-sass\": \"^3.4.3\",
    \"node-sass\": \"4.14.1\",
    \"postcss\": \"^8.4.14\",
    \"postcss-loader\": \"^7.0.1\",
    \"postcss-modules-values\": \"^4.0.0\",
    \"webworkify-webpack\": \"^2.1.5\",
    \"whatwg-fetch\": \"^3.6.2\"

我对 Webpack 的经验很少，所以也许（肯定）我错过了一些东西。我阅读了 Webpack、css-loader 和 postcss-modules-values 的文档，但找不到答案。我还尝试了两件事：

从.scss 文件的第一行删除~ 字符，这不起作用。
如果我在使用它的.scss 文件中声明该值，它会起作用...如果我有一个像这样的.scss 文件，则编译该值：
```
@value brightGreen: #5efa0b;

.my-class {
  color: brightGreen;
}
```
但我们的想法是能够使用我们组件库中的值。

我非常感谢您能提供的任何帮助。如果您需要更多信息，请与我们联系。

标签： webpack sass css-modules css-loader postcss-loader

【解决方案1】：

@value 指令是 CSS 模块功能。我知道css-loader 默认情况下只会将 CSS 模块规范应用于以.module.css (source) 结尾的文件。您可以尝试将colors.css 重命名为colors.module.css 或更新css-loader 或postcss-loader 配置以将所有.css 文件视为模块（此选项会降低性能）？

【讨论】：