要在 create-react-app 腳手架里使用 less 的方法:

1. 在 powershell 里暴露腳手架配置

yarn eject

2. 在暴露的 config 文件里面打開 webpack.config.js 文件,然后設置 less

• 66 行 插入 less 更改:

const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/

• 500 行，插入：

{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,}, "less-loader"),// Don't consider CSS imports dead code even if the// containing package claims to have no side effects.// Remove this when webpack adds a warning or an error for this.// See https://github.com/webpack/webpack/issues/6571sideEffects: true,},// Adds support for CSS Modules (https://github.com/css-modules/css-modules)// using the extension .module.css{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {getLocalIdent: getCSSModuleLocalIdent,},}, "less-loader"),
},

3. 在 powershell 里安裝對應的包(在這里安裝的 less-loader 的包是低版本 高版本可能存在不兼容的問題)

yarn add less less-loader@5.0.0

4. 配置全部變量(在 react-app-env.d.ts 文件里加入)

declare module '*.less' {interface Style {[propName: string]: string}const style: Styleexport default style
}

5. 引用方式(文件名字為 style.module.less)

import style from './style.module.less'

總結

以上是生活随笔為你收集整理的要在 create-react-app 脚手架里使用 less 的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。