如何在生产中使用 CSS 模块并在生产中加载标准 css 文件？
我正在使用 webpack 配置一个带有 React 的新应用程序
在开发中，我使用 webpack loader 使用 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 组件中的所有类定义都不再在浏览器中呈现。
我应该如何解决这个问题？
你不能只是从使用 CSS 模块切换到不使用它们，这行不通，因为你的代码依赖于它。也没有理由不在生产中使用 CSS 模块。您想要更改的不是 CSS 模块，而是您包含 CSS 的方式。您可以将它们提取extract-text-webpack-plugin到一个单独的.css文件中，而不是将它放在您的 JavaScript 包中，但您仍然需要对加载器使用相同的配置。
网络包 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 ，第一个参数仅用作后备。
网络包 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 } }
]
})
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句