Question

如何在生产中使用CSS模块并在生产中加载标准css文件？

我正在使用webpack

使用React配置新应用程序

在开发中，我使用webpack加载器的CSS模块：

到我的.jsx文件中导入样式文件：

import style from './stile.scss';
export class App extends React.Component {
 render() {
    return (
        <div>
            <div>
                <span className={style.title}>Ciao</span>
            </div>
        </div>
    )
 }
}

然后我为我的样式表使用以下webpack配置加载器：

loaders: [
 {
   test: /\.(scss|css)$/,
  loader: 'style-loader!css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]-[local]___[hash:base64:5]!sass-loader?sourceMap'
  }
]

这样一切正常（样式包含在.js文件中，并且正确地使用了类）

但是在生产？我应该让浏览器渲染webpack bundle.js输出文件中包含的所有类？

我宁愿使用webpack（和ExtracttextPlugin）创建一个带有我所有风格的css文件：

 {
     test: /\.(css|scss)$/,
     loader: ExtractTextPlugin.extract('css-loader' )
 }

并链接我的index.html

中生成的.css

问题是现在所有我在 React组件中的类定义都不再在浏览器中呈现。

我该如何解决这个问题？

Answer 1

您无法从使用CSS模块切换到不使用CSS模块，因为您的代码依赖于它而无法解决问题。此外，没有理由不在生产中使用CSS模块。你想要改变的不是CSS模块，而是你包含CSS的方式。您可以使用extract-text-webpack-plugin将其提取到单独的.css文件中，而不是将其放入JavaScript包中，但仍需要对加载器使用相同的配置。

webpack 1

{
  test: /\.(css|scss)$/,
  loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]-[local]___[hash:base64:5]!sass-loader?sourceMap')
}

如果无法提取CSS，则第一个参数style-loader仅用作后备。

webpack 2

ExtractTextPlugin.extract的参数使用options而不是字符串中的内联查询进行了更改和可读性。

{
  test: /\.(css|scss)$/,
  loader: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use:  [
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          modules: true,
          importLoaders: 1,
          localIdentName: '[name]-[local]___[hash:base64:5]'
        }
      },
      { loader: 'sass-loader', options: { sourceMap: true } }
    ]
  })
}

使用webpack和React在开发/生产中配置CSS模块

1 个答案: