首页 文章

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

提问于
浏览
0

我正在使用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,但是现在它是未定义的 .

我尝试添加选项“modules:true”,如下所示:

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

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

1 回答

  • 0

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

    • 您可以在css-modules中使用global block来使bootstrap类全局化 .

    • 您可以创建2个加载器,一个启用了css-modules,另一个启用了全局样式,并以某种方式区分它们 . 例如,您可以使所有以 .module.scss 结尾的文件使用 modules: true .

相关问题