生产中不存在的 CSS 模块类

Question

我一直在我想被其他库使用的反应库中使用带有 sass 的 css 模块。

我有以下组件代码：

import React, { Component } from 'react';
import styles from './FormInput.scss';
import cs from 'classnames';
import { Input, Label } from '../..';

export const FormInput = ({ invalid, required }) =>
    <div
      className={styles['form-input']}
    >
      <Label htmlFor={this.id} invalid={invalid} required={required}>
        {label}
      </Label>
    </div>

在开发中，css 模块类在呈现的标记中：

<div class="form-group FormInput__form-input___2PK4N">
  <label for="ctrl1" class="">Form Input</label>
</div>

但是当我导入库时，它们不存在：

<div class="form-group">
  <label for="ctrl1" class="">label</label>
</div>

如果我从 import styles from './FormInput.scss'; 记录样式变量

/static/media/Banner.ee4182d1.scss 好像错了。

我正在使用 webpack，在我的 webpack.dev.config.js 中，我的加载器看起来像这样：

  {
    test: /\.css$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      // Could also be write as follow:
      // use: 'css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
      use: [
        {
          loader: 'css-loader',
          query: {
            modules: true,
            localIdentName: '[name]__[local]___[hash:base64:5]'
          }
        },
        'postcss-loader'
      ]
    })
  },
  {
    test: /\.scss$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',

      // Could also be write as follow:
      // use: 'css-loader?modules&importLoader=2&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]!sass-loader'
      use: [
        {
          loader: 'css-loader',
          query: {
            modules: true,
            sourceMap: true,
            importLoaders: 2,
            localIdentName: '[name]__[local]___[hash:base64:5]'
          }
        },
        'sass-loader'
      ]
    })
  }

在webpack.prod.config.js 中看起来像这样：

  {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract(
      Object.assign(
        {
          fallback: require.resolve('style-loader'),
          use: [
            {
              loader: require.resolve('css-loader'),
              options: {
                importLoaders: 1,
                minimize: true,
                sourceMap: true
              }
            },
            {
              loader: require.resolve('postcss-loader'),
              options: {
                ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
                plugins: () => [
                  require('postcss-flexbugs-fixes'),
                  autoprefixer({
                    browsers: [
                      '>1%',
                      'last 4 versions',
                      'Firefox ESR',
                      'not ie < 9' // React doesn't support IE8 anyway
                    ],
                    flexbox: 'no-2009'
                  })
                ]
              }
            }
          ]
        },
        extractTextPluginOptions
      )
    )
    // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
  },
  {
    test:/\.scss$/,
    use:ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: [
        {
          loader:'css-loader',
          options:{
            modules: true,
            importLoaders: 1,
            minimize: true,
            sourceMap: true
          }
        },
        {
          loader:  'sass-loader',
        },
        {
          loader:  'postcss-loader',
          options:{
            plugins:function(){
              return [autoprefixer]
            }
          }
        }
      ]
    })
  }

我可以看到作为输出的一部分生成了 scsss 文件，但为什么这些类被剥离了？

Answer 1

你没有在你的产品中启用模块css-loader

        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
            minimize: true,
            sourceMap: true,
            modules: true // NEED TO ADD THIS
          }
        },