办公用品企业网站建设方案,网站建设推广优化有哪些基本方法,黄陂区建设局网站,中建豪城建设有限公司网站一、简介
React 项目开发中可能会使用到 Less、Sass 等样式预处理器#xff0c;create-react-app 创建的 React 项目#xff0c;默认就是支持 Sass 的。如果需要使用 Less 则需要额外手动安装配置。
二、方式一#xff1a;webpack.config.js 配置#xff08;不推荐#…一、简介
React 项目开发中可能会使用到 Less、Sass 等样式预处理器create-react-app 创建的 React 项目默认就是支持 Sass 的。如果需要使用 Less 则需要额外手动安装配置。
二、方式一webpack.config.js 配置不推荐 由于需要暴露隐藏的配置文件不利于项目升级不推荐使用。 安装 less 与 less-loader $ npm i less less-loader -S
# 或
$ yarn add less less-loader -S暴露 webpack 配置文件。提示该操作不可逆长远考虑不推荐使用该方案 $ npm run eject修改 webpack.config.js 配置文件 首先要找到以下代码可以使用 VSCode 查询功能直接找到搜索内容为 sass: // style files regexes
const cssRegex /\.css$/;
const cssModuleRegex /\.module\.css$/;
const sassRegex /\.(scss|sass)$/;
const sassModuleRegex /\.module\.(scss|sass)$/;仿照格式在下面配置 less: // style files regexes
const cssRegex /\.css$/;
const cssModuleRegex /\.module\.css$/;
const sassRegex /\.(scss|sass)$/;
const sassModuleRegex /\.module\.(scss|sass)$/;
const lessRegex /\.less$/;
const lessModuleRegex /\.module\.less$/;继续向下搜索 sass能够找到以下代码: ...
{test: sassRegex,exclude: sassModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: icss,},},sass-loader),// Dont 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, but using SASS
// using the extension .module.scss or .module.sass
{test: sassModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: local,getLocalIdent: getCSSModuleLocalIdent,},},sass-loader),
},
...和之前配置一样仿照 sass 配置添加 less 配置: ...
// config less
{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,},less-loader), sideEffects: true,
},
{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {getLocalIdent: getCSSModuleLocalIdent,},},less-loader),
},
...到这就完成了 webpack.config.js 配置 less重启项目则可使用 less 样式了。
三、方式二craco.config.js 配置推荐 安装 craco $ npm i craco/craco
# 或
$ yarn add craco/craco安装 less 与 less-loader $ npm i less less-loader -S
# 或
$ yarn add less less-loader -S修改 package.json 文件 scripts: {
- // start: react-scripts start,
- // build: react-scripts build,
- // test: react-scripts test,start: craco start,build: craco build,test: craco test,eject: react-scripts eject
}补充下载装饰器可选看情况使用 $ npm i babel/plugin-proposal-decorators -S
# 或
$ yarn add babel/plugin-proposal-decorators -S配置 croca.config.js 文件 const path require(path)
const lessPlugin require(craco-less);module.exports {// 插件plugins: [{plugin: lessPlugin,options: {lessLoaderOptions: {lessOptions: {modifyVars: { primary-color: #1DA57A },javascriptEnabled: true}}}}],// webpack 配置webpack: {// 配置别名alias: {// 约定使用 表示 src 文件所在路径: path.resolve(__dirname, src)}},babel: {plugins: [[babel/plugin-proposal-decorators, { legacy: true }]]}
}
