引入less.js用法，less引入变量

react根据判断条件引入不同less文件的方法

1、首先显示create-react-app脚手架配置。找到项目下config/webpack.config.js，在file-loader之前加入这部分代码。下载less-loader依赖。

2、在项目中下载安装插件less。暴露配置文件。配置webpack.config.js文件，在项目中找到匹配loade的正则表达式，按照css的样子添加less。

3、注：新版本的react-sricpts@x+ 是在npm run eject 之后，把webpack.config.dev.js和webpack.config.prod.js合并成一个了，跟本文配置方法不一样。

相关问答

Q1: sass和less的区别在哪里?

编译环境不一样 Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less 代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到 项目中。

编写变量的方式不同。Sass使用$，而Less使用@。在Less中，仅允许循环数值。在Sass中，我们可以遍历任何类型的数据。但在Less中，我们只能使用递归函数循环数值。

LESS和Sass的主要不同就是他们的实现方式，LESSS是基于JavaScript，所以，是在客户端处理的。另一方面，Sass是基于Ruby的，然后是在服务器端处理的。

不同点：语法规则不同，当然功能或许略有差别。对写代码的设计师来说，它们都是很酷的工具，它们也可以帮助开发者更有效和快速的工作。如果你是Ruby或HTML的粉丝，那么Sass会是你的好助手。

Q2: vue项目引入公共样式less文件

公共样式文件 引入方式 （1）局部引入 （2）全局引入 a.需要安装sass-resources-loader。

使用其他版本的less-loader：在你的项目目录中，尝试更新或更换less-loader的版本。可以在package.json中的`devDependencies`或`dependencies`中找到less-loader。

直接在webpack config 中的 sassResources 数组中添加导入的文件。

在使用vux开发手机页面时，引入vux的公共样式less一直报错，通过各种百度，Google都没有解决，走了很多弯路。最后才发现钻牛角尖了，可以换一种方法引入。

首先，需要安装一个LESS编译器，例如Less.app、CodeKit等，或者在项目中集成Gulp、Webpack等自动工具。其次，将所有的.less文件放入less文件夹中，并通过编译器将它们编译成CSS文件，最后将生成的CSS文件引入到项目中即可。

Q3: vue加载同的less

1、公共样式文件 引入方式 （1）局部引入 （2）全局引入 a.需要安装sass-resources-loader。

2、使用其他版本的less-loader：在你的项目目录中，尝试更新或更换less-loader的版本。可以在package.json中的`devDependencies`或`dependencies`中找到less-loader。

3、vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的， yarn源的问题有可能导致失败。

4、直接在webpack config 中的 sassResources 数组中添加导入的文件。

5、在Vite创建的Vue 3项目中，你遇到了`npm ERR！ code EUNSUPPORTEDPROTOCOL`错误。该错误通常表示npm无法识别或不支持给定的URL类型。根据你提供的错误信息，看起来问题出现在尝试通过`npm link`来安装本地依赖时。

关于引入less.js用法和less引入变量的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。