CRA Style样式配置

CRA Style样式配置

文章目录

• • CSS
  • CSS Modules
  • sass
  • 配置sass-resource
  • less

CSS

• 无须配置css, CRA天然支持

CSS Modules

• css Modules亦天然支持，尽管有些人不喜欢，但很有用，能避免很多class冲突
• 注意，css file须以module.css后缀命名，否则不成功

import Style from './dule.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
• , 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后面进行，
• 如遇到：
• 在安装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的本质是覆写）;