react项目使用less不生效解决方法

最新推荐文章于 2024-01-12 11:05:03 发布
最新推荐文章于 2024-01-12 11:05:03 发布
阅读量4.5k 收藏 1
点赞数
分类专栏： react less 文章标签： react less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liberal_w/article/details/124385282
版权

使用脚手架搭建react项目，使用less预编译，发现直接安装less依赖后引入less文件不生效！！

1.安装依赖

npm install less less-loader

2.暴露配置

npm run eject

依赖也安装了，配置也暴露了，为啥不生效？！(O_o)??

这是突然想到要检查一下config文件夹中的webpack.config.js瞅瞅有没有less配置，果然没有发现less的身影，这就好办了

 

解决方法：在webpack.config.js文件中依葫芦画瓢，把less的配置加上

 

 

 一顿操作猛如虎，就差最后一步，重启项目--完成！！

还请各位大佬多多指教

慌慌.zz
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 1.8踩坑，模块化引入less样式不生效
for what
02-19 1744
react 导入less样式
react项目如何使用iconfont的方法步骤
10-17
主要介绍了react项目如何使用iconfont的方法步骤，这里介绍下如何在项目中配置。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
scss或less嵌套写法样式不生效问题
Lrn的博客
12-04 4400
一般我们在写项目时，不管是原生的css去写还是通过less/sass预处理器去处理，都习惯性的根据不同的功能模块等去对应相应的样式文件，最后统一在一个地方引入，例如： common.scss文件 @import './reset.scss'; @import './header.scss'; @import './nav.scss'; @import './login.scss';/*登录*/ @import './systemuser.scss'; /* 用户管理*/ 最后在app.vue文件中.
less在React中不生效 以及 为React项目配置less支持
前端历险记的博客
07-22 2528
less在React中不生效 以及 为React项目配置less支持 通过create-react-app脚手架创建出来的React项目默认是不支持less的，这也就是为什么明明引入了.less样式文件，样式却不生效的原因。所以接下来我们开始为React项目配置less支持。...
React项目less样式无效
mirror6的博客
06-11 4767
我们在用react脚手架搭建项目的时候，webpack的相关配置已经被隐藏了。如果要解决less样式无效这个问题，那么我们需要先把webpack的相关配置暴露出来。 先贴一下我react和webpack的版本，因为我在查资料的时候发现config最后暴露出来的文件和网上的不一样。 1、安装less依赖 npm install less less-loader 2、暴露配置： npm run eject 3、修改配置文件 经过第二步之后，你的项目会多一个config的文件夹，里面的内容如上图。 然后需
react使用less文件样式不生效
Hemi_he的博客
06-01 5259
在react中配置less
关于 react项目 引入 less不起作用的问题解决
qww12388的博客
01-12 3193
关于 react项目 引入 less不起作用的问题解决
使用Jenkins部署React项目的方法步骤
10-17
主要介绍了使用Jenkins部署React项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解在React项目中安装并使用Less（用法总结）
10-17
主要介绍了详解在React项目中安装并使用Less（用法总结），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
less除法没有效果和引用其他less文件不生效
钱小端~
02-22 1356
less引用其他less文件不生效的问题 例如a.less中引入b.less 回答： 1.可能是引入的时候没有加空格：@import “b.less”; 2.注意查看b.less文件中的媒体查中的除法效果是不是加了括号 因为less中做算术运算的时候一般加法+，减法-，乘法可以直接写基本不会出现什么问题但是除法/需要（）括起来，不然会认为你的是两个值分别为值一 / 值二，不会进行计算返回计算结果。且算术运算±/两边一定要有空格,一般用到除法最多，其余几个极少用到 ...
解决：使用create-react-app创建react项目引入less文件无效
sweethhheart的博客
07-04 1058
使用create-react-app创建的项目默认对引入 less 文件不生效，分享解决方法。
在creact-react-app引入less，以及失效问题
weixin_44874595的博客
07-17 916
使用 create-react-app 脚手架搭建react项目后 1.执行命令下载less和less-loader npm install less-loader less --save-dev 2、执行暴露出webpack 相关的配置文件 yarn eject 3.修改 config/webpack.config.js ，一共修改了三处 代码： const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; 代码：
关于react18引入less不生效问题
最新发布
qq_39933787的博客
01-12 242
使用craco
less内嵌样式不生效
好人一生没有bug
11-28 647
less内嵌样式不生效
react项目less文件不起作用解决方法
daxi玫瑰的博客
06-03 5566
1.通过安装插件，将less转成css npm install -g less 然后进入到需要转换的目录（例：cd .\src\pages\login\），输入命令： 例：lessc login.less login.css but，这种方法只能临时解决一个文件问题，治标不治本。 2.去node_modules目录下，找到react-scripts -> config -> webpack.config.js 修改里面的内容： 参考css-loader ，配置一下less-lo.
在引入less时 ，嵌套的样式不生效，取消嵌套，样式就生效了？？
weixin_43764828的博客
05-23 8678
在引入less时 ，嵌套的样式不生效，取消嵌套，样式就生效了？？ .container{ display: flex; .nav-left{ background: blue; } .main{ height: calc(100vh); background: yellow; } } 这样不生效，下面的就有效？？为啥？ .container{ display: flex; } .nav-left{...
less或sass嵌套写法不生效,但不嵌套可以生效
热门推荐
范天缘的博客
03-22 1万+
记得在style标签加lang属性，我就是忘记了lang属性所有才没有生效 //less <style lang="less" scoped> @import './index.less'; </style> //sass <style lang="sass" scoped> @import './index.sass'; </style>
vue3 使用外部reset.less嵌套部分样式无效
积极的小可爱~的博客
08-12 1163
vue3 webpack less 引入的样式嵌套部分无效，样式不生效
React脚手架解决不能使用less问题
wangchaoqi1985的博客
08-17 139
React脚手架解决不能使用less问题
react 项目less未生效，less loader已经配置
06-09
如果你已经在 React 项目中配置了 less loader，但是 less 样式文件未能生效，可能是以下原因导致的： 1. 你需要在组件中导入 less 样式文件，例如：`import './style.less';` 2. 检查 less loader 是否正确配置，可以在 webpack 配置文件中查看，例如： ``` { test: /\.less$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', }, { loader: 'less-loader', }, ], } ``` 3. 检查 less 样式文件是否存在问题，例如语法错误等问题。 如果以上解决方案都没有解决问题，可以尝试在命令行中运行 `npm start` 或 `yarn start`，重新启动项目，以确保 less loader 生效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值