問題起因
最近在研究react,根據官方提供的create-react-app腳手架搭建了一個項目,但是像下面這樣引入CSS的時候,會發現全局都會生效,這明顯不合理嘛,那么,怎么設置呢?
import './header.css'; // 這樣引入相當於全局引入了
CSS模塊化
我們知道,在webpack中,可以通過CSS-loader和style-loader對CSS文件進行一些打包處理,里面有一些配置項,可以將CSS打包成一個模塊,然后引入,一般webpack是這樣設置的
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]_[local]__[hash:base64:5]'
}
其中modules為true時,就是把CSS打包為模塊的控制參數
如何設置?
用create-react-app創建出來的項目,我們得先找到那個配置文件在哪,文件默認路徑為:\node_modules\react-scripts\config\webpack.config.dev.js,然后找到如下代碼,新增一個參數modules:true就可以了:
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
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',
}),
],
},
},
],
},
最后
在你需要用到的模塊引入
import headerCss from './header.css';
當然,別忘了生產線的配置也改下,也就是webpack.config.prod.js文件