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

您的prod css-loader

中未启用模块

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

生产中没有css模块类

1 个答案: