样式配置"/>
CRA Style样式配置
文章目录
- CSS
- CSS Modules
- sass
- 配置sass-resource
- less
CSS
- 无须配置
css
,CRA
天然支持
CSS Modules
css Modules
亦天然支持,尽管有些人不喜欢,但很有用,能避免很多class
冲突- 注意,
css file
须以module.css
后缀命名,否则不成功
import Style from './style.module.css';<Button className={Style.btnName}>Login in</Button>// => <button class='fileName_clsName_hash'>
sass
- 旧版需要安装
node-sass
或dart-sass
,无需安装sass-loader
- 新版的**CRA*
*直接安装sass
即可跑动
配置sass-resource
// 使用 react-app-rewire-sass-resource(注意这个是自己写的库) + sass-resources-loader 配置全局 sass 变量
const configSassResources = (config) => {require('./react-app-rewire-sass-resource')(config, { // 这里参数参考 sass-resources-loaderresources: ['./src/styles/variables.scss',]})
}
less
- 使用
custom-cra
,react-app-rewried
,less
,less-loader
来完成配置
const cust_cra = require('customize-cra')
const { addLessLoader } = cust_craconst configLess = (config) => {addLessLoader({})(config)
}
- 有大概率会遇到以下问题:
Invalid Options for PostCSS Loader
,XXXX API Scheme
this.getOptions is undefined
,no PluginXXX
* 等问题- 解决方案一,使用低于
version5.0
以下的less-loader
- 解决方案二,使用以下配置:
const cust_cra = require('customize-cra')
const { adjustStyleLoaders } = cust_craconst configStyleLoader = (config) => {adjustStyleLoaders(({ use: [, , postcss] }) => {const postcssOptions = postcss.options;postcss.options = { postcssOptions }})(config)
}
- 并将
configStyleLoader
置于configLess
后面进行, - 如遇到:
this.getOptions is undefined
this.getOptions
在安装less-loader/sass-loader
时似乎会遇到这个问题,这是由于版本不兼容的情况导致的,此时应该降一下版本,- 原因:
less-loader@8.0.0
只兼容webpack5
- 比如在
21-03
这个时间段,less-loader
最新版本是8.0.0
,改为7.3.0
解决问题 _type of no function/no ennabled javascript
,出现这样的错误的时候,添加loader options
lessOptions: {javascriptEnabled: true
}
- 注意
- 引用
postcss
及其插件时,应将配置postcss
的配置项置于less/sass
等的配置项之后,以免引起错误(rewire
的本质是覆写);
更多推荐
CRA Style样式配置
发布评论