???create-react-app???react??????????????????css

不飞则已，一飞冲天；不鸣则已，一鸣惊人。这篇文章主要讲述???create-react-app???react??????????????????css相关的知识，希望能为你提供帮助。
?????????round xbox ref row ?????? external ?????? ?????? resolve
?????????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> ) } }

【???create-react-app???react??????????????????css】??????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 ???????????????