由create-react-app的react項目使用局部css
阿新 • • 發佈:2018-12-20
設置 加載 為什麽 rtl roc processor class cif 才會
為什麽webpack項目中使用局部css
在項目中,尤其是大項目中,很可能因為使用相同的css,在vue中可以直接在style中加入scope屬性,而在create-react-app的react項目怎麽實現這種局部的style呢
通過style-loader實現局部css
第一種方式通過style-loader的modules屬性
暴露出webpack配置 如果暴露過了 省略此步驟
npm run eject
修改配置
// config > webpack.config.dev.js // style files regexes const cssRegex = /\.css$/; const useable = /\.use(able)?\.css$/; // 添加 匹配css const cssModuleRegex = /\.module\.css$|\.use(able)?\.css$/; { test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, modules: true // 添加到這裏 }), },
css 註意在配置中配置了正則,值匹配名帶use.css或者useable.css為結尾的文件
// style.use.css
.box {
background: red;
}
組件中使用
import React, {Component} from ‘react‘; import style from ‘./style.use.css‘ export default class Test extends Component { render() { return( <div className = {style.box}> <div> {‘測試‘} </div> </div> ) } }
最終class被修改只在此組件中使用,在組件中就可以用這種方式來設置局部的css了
第二種方式
通過這種方式,不是真正的設置了局部變量,而是讓style只在這個組件渲染的時候,將style添加到頁面中,組件銷毀之後卸載組件用的style
首先也是暴露出webpack配置 如果暴露過了 省略此步驟
npm run eject
// config > webpack.config.dev.js 修改配置 // style files regexes const cssRegex = /\.css$/; const useable = /\.use(able)?\.css$/; // 添加 匹配css const cssModuleRegex = /\.module\.css$|\.use(able)?\.css$/; // 添加一個getUseableLoaders const getUseableLoaders = (cssOptions, preProcessor) => { const loaders = [ require.resolve(‘style-loader/useable‘), { loader: require.resolve(‘css-loader‘), options: cssOptions, }, { // Options for PostCSS as we reference these options twice // Adds vendor prefixing based on your specified browser support in // package.json loader: require.resolve(‘postcss-loader‘), options: { // Necessary for external CSS imports to work // https://github.com/facebook/create-react-app/issues/2677 ident: ‘postcss‘, plugins: () => [ require(‘postcss-flexbugs-fixes‘), require(‘postcss-preset-env‘)({ autoprefixer: { flexbox: ‘no-2009‘, }, stage: 3, }), ], }, }, ]; if (preProcessor) { loaders.push(require.resolve(preProcessor)); } return loaders; };
...
...
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
}),
},
{ // 添加loader
test: useable,
exclude: cssModuleRegex,
use: getUseableLoaders({
importLoaders: 1,
}),
},
...
...
css 註意在配置中配置了正則,值匹配名帶use.css或者useable.css為結尾的文件
// style.use.css
.box {
background: red;
}
組件中使用
import React, {Component} from ‘react‘;
import style from ‘./style.use.css‘
export default class Test extends Component {
render() {
return(
<div className = ‘box‘>
<div>
{‘測試‘}
</div>
</div>
)
}
}
這樣就之後再加載此組件中 style.use.css 才會被引用
由create-react-app的react項目使用局部css