Webpack 3 + Sass Loader：不能将 scss 用作模块

Posted 2023-03-06

【中文标题】Webpack 3 + Sass Loader：不能将 scss 用作模块

【英文标题】：Webpack 3 + Sass Loader : Cannot use scss as a module

【发布时间】：2018-12-08 17:40:35

【问题描述】：

我正在使用 Webpack 3 + Sass Loader + Sass Resources Loader 来构建一个多主题的 React App。

这是我的 webpack.config：

 
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract(
  fallback: 'style-loader',
  use: [
    
      loader: 'css-loader',
      options: 
        importLoaders: 1,
        modules: true,
        minimize: IS_PRODUCTION,
        sourceMap: IS_DEVELOPMENT,
        localIdentName: IS_DEVELOPMENT ? '[name]__[local]__[hash:8]' : '[hash:8]'
      ,
    ,
    
      loader: 'postcss-loader',
      options: 
        sourceMap: IS_DEVELOPMENT,
        plugins: postCssPlugins,
      
    ,
  ],
),
  ,  

test: /\.scss$/,
loader: ExtractTextPlugin.extract(
  use: [
    
      loader: 'css-loader',
      options: 
        sourceMap: IS_DEVELOPMENT,
      
    ,
    
      loader: 'sass-loader',
      options: 
        sourceMap: IS_DEVELOPMENT
      
    ,
    
      loader: 'sass-resources-loader',
      options: 
        sourceMap: IS_DEVELOPMENT,
        resources: [
          './common/style/flaticon/_flaticon_class.scss',
          `./common/branding/$BRANDING/$BRANDING.scss`,
          './common/style/bootstrap/_general_variables.scss',
          './node_modules/bootstrap/scss/bootstrap-reboot.scss', // functions, variables, mixins, reboot
          './node_modules/bootstrap/scss/_root.scss',
          './node_modules/bootstrap/scss/_type.scss',
          './node_modules/bootstrap/scss/_images.scss',
          './node_modules/bootstrap/scss/_grid.scss',
          './node_modules/bootstrap/scss/_utilities.scss',
        ]
      ,
    ,
  ]
)

,

实际上，它工作得很好，但是当我尝试将我的 scss 文件导入我的 react 组件并像 css 文件一样利用它时，类名是未定义的。

在我的组件文件中：

import styles from './ActivityGridItem.scss';
...
<div className=`m-2 $styles.activityTypeIcon`></div>

通常，样式 .activityTypeIcon 应该应用于我的 div，但现在它是未定义的。

我尝试像这样添加选项“模块：true”：

test: /\.scss$/,
loader: ExtractTextPlugin.extract(
  use: [
    
      loader: 'css-loader',
      options: 
        modules: true,
        sourceMap: IS_DEVELOPMENT,
      
    ,

但是，每个 sass 文件都被识别为一个模块，我不能使用全局 boostrap 类，如 row、col、m-* 等。

【参考方案1】：

有几种方法可以做到这一点

您可以在 css-modules 中使用 global block 使引导类成为全局的。 您可以创建 2 个加载器，一个启用 css 模块，另一个启用全局样式并以某种方式区分它们。例如，您可以让所有以.module.scss 结尾的文件都使用modules: true。