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

Question

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

我配置与使用反应的WebPack

在发展一个新的应用程序使用我的WebPack装载机使用CSS模块：

到我.jsx文件I导入样式文件：

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文件和类样式正确hased）

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

我宁愿用我所有的风格创建的WebPack（和ExtracttextPlugin）一个CSS文件：

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

和链接在我的index.html产生的.css

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

我应该如何解决这个问题？

Answer 1

你不能从使用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') 
} 

第一个参数style-loader只用作回退如果CSS不能被提取。

的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 } } 
    ] 
    }) 
}