Nuxt中使用sass

已于 2023-01-04 17:43:56 修改
阅读量719 收藏
点赞数
分类专栏： # nuxt 每日一菜 前端 文章标签： 前端 javascript sass vue
于 2023-01-04 17:41:59 首次发布
原文链接：https://blog.csdn.net/qq_42591581/article/details/120738859
版权
在Nuxt项目中，直接使用npm安装高版本的sass-loader和sass可能导致错误。错误信息为Rulecanonlyhaveoneresourcesource。解决方法是降级到特定版本，如sass@^1.42.1和sass-loader@^7.1.0，该配置在nuxt@^2.15.8版本上运行正常。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

nuxt直接使用npm i -D sass-loader sass安装sass-loader和sass后报错问题

Rule can only have one resource source (provided resource and test + include + exclude)

若报此错误则表明sass和sass-loader的版本过高可使用以下版本进行安装

  "devDependencies": {
    "sass": "^1.42.1",
    "sass-loader": "^7.1.0"
  }

目前测试nuxt版本^2.15.8无问题

本文转载，侵权联系删除，谢谢

nuxt 项目 配置对 less、sass、stylus 预处理器的支持
小青蛙的博客
08-12 5542
nuxt 配置对less、sass、stylus的支持 导读 在项目开发的过程中呢，在编写项目样式的时候，很多童鞋喜欢使用css预处理器进行方便快捷的开发， 所以说，让我们的项目支持预处理器是非常有必要的； 这章节呢，我们项目新增对 stylus、less、sass 这三款比较常用的css预处理器工具的支持； 我们可以去到官网查看文档：https://zh.nuxtjs.org/api/conf...
详解nuxt sass全局变量(公共scss解决方案)
11-30
恩，经过朋友的帮助搞定的，因为 nuxt资料比较少的原因，很感谢  “包子”的帮助 注意  本案例  只是把你通用 的 比如  $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ; 以上这种通用的变量抽出来，方便你在其他scss的样式里面调用 比如 li { background: nth($colour,6) } 只存储变量，别放公共的样式进去切记公共的样式 你可以参考我之前的博客那种写法  我直接上案例吧sass_jb51.rar 案例里面有运行说明 我建议你还是跟我一步一步来走，比较刻骨铭心 第一步新建文件夹
nuxt sass全局变量也就是公共 scss 解决方案 案例
11-02
主要针对 nuxt引入 sass 和 其中一个scss文件抽出来作为公共变量存储文件的解决方案，因为官方案例少，目前用的人少，所以贴出来分享下
nuxt3：使用sass（reset.scss、px2rem）
snow的博客
01-31 3324
本文项目pc端与移动端在一个项目，pc直接使用px，移动端使用px2rem，通过sass的函数方法已实现，针对不同分辨率设置rem的基准值。但是，这样个人认为不是很好，不能实时的体现屏幕的变化。reset.scss、global.scss文件直接在这里引用，样式可以使用，但是变量、函数等不能使用。代码文件：/assets/scss/reset.scss。原理：通过设置根元素的基准值，来响应不同分辨率的屏幕。六、欢迎交流指正，关注我，一起学习。1.4、文件后缀为： .scss。二、reset.scss。
nuxt中使用sass
weixin_44744501的博客
02-12 627
nuxt sass
NuxtJS怎么样用sass
weixin_45675581的博客
02-13 797
一、安装需要用到的loader npm install --save-dev node-sass sass-loader@10 二、页面使用(注意不要漏了lang=“scss”,不是sass) <style lang="scss">//注意!这里很关键,很多配置成了不编译就是漏了lang="scss" </style> 课程链接：https://xuexiluxian.cn/course/detail/30f536da49504f158b9fc285971cee52 .
nuxt使用sass预编译
李知恩李知金
04-22 571
找到package.json文件，在开发依赖下加入以下包名 "node-sass": "^4.12.0", "sass-loader": "^7.1.0" 注意！不能直接安装最新版本sass，版本太高nuxt要报错 然后在终端执行 npm i 拉取依赖
nuxt-sass-resources-loader：用于NuxtJ的SASS资源（例如变量，mixins等）模块
02-05
// nuxt-sass-resorces-loader export default { modules : [ 'nuxt-sass-resources-loader' ] , // your settings here sassResources : [ '@/path/to/first-resources.sass' ] } // @nuxtjs /style-re
nuxt 怎么引用sass
05-14
要在 Nuxt 中使用 SASS，需要安装 node-sass 和 sass-loader 两个依赖项。可以使用以下命令安装它们： ``` npm install --save-dev node-sass sass-loader ``` 然后在 nuxt.config.js 文件中添加以下配置： ```js...
nuxt 怎么安装sass
05-14
要在 Nuxt.js 项目中使用 Sass，需要安装 `node-sass` 和 `sass-loader`。可以通过以下命令进行安装： ```bash npm install --save-dev node-sass sass-loader ``` 安装完毕后，在 Nuxt.js 项目的 `nuxt.config.js...
vue2中使用sass并配置全局的sass样式变量的方法
10-18
主要介绍了vue2中使用sass并配置全局的sass样式变量的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
SASS用法指南
10-17
学过CSS的人都知道，它不是一种编程语言。 你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。 很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。
Nuxt.js 使用sass
彭世瑜的博客
05-11 2480
安装loader npm install --save-dev node-sass sass-loader 注意： 1、语言设置 lang="scss" 2、../../ 改成 ~~ 或 ~
Nuxt.js项目目录说明及sass使用
qq_37635012的博客
07-11 1175
Nuxt.js项目目录 之前<<一篇文章搞懂服务器端渲染与客户端渲染以及利用脚手架工具 create-nuxt-app搭建Nuxt.js项目>>里我们学习了如何用脚手架工具 create-nuxt-app搭建Nuxt.js项目，如下图： 运行一下我们搭建好的nuxt项目之后，浏览器里打开端口localhost:3000，效果如下：这个myproject就是我们项目名。 打开安装好了的nuxt项目，其目录有如下这些： assets文件夹下放一些未被编译的静态资源，如图片、css
nuxt配置sass
weixin_30888707的博客
06-19 245
没有比这更简单的了 只需要安装node-sass sass-loader就可以了 npm i node-sass sass-loader -D 然后就可以直接使用了： <style lang="scss" scoped> 　　.box{ 　　　　background: #f00; 　　} </style> 转载于:https://ww...
Nuxt安装scss
kedouwo的博客
12-04 1166
Nuxt安装scss及问题
Nuxt^2.15.8 版本 node-sass和sass-loader版本问题
最新发布
qq_43230040的博客
02-21 503
npm uninstall node-sass （如果是sass，也要卸载npm uninstall sass）重新安装node-sass和sass-loader版本。首先卸载已经安装的版本。
nuxt 配置全局scss
m0_56590688的博客
01-23 1657
模块自动加载这些全局的SCSS资源。首先，确保你已经安装了。
Nuxt使用scss
weixin_30390075的博客
09-25 337
Nuxt中使用scss也很简单，分简单的几步就OK 一、安装scss依赖 用IDE打开项目，在Terminal里通过npm i node-sass sass-loader scss-loader --save-dev 来安装即可 二、统一处理scss 在项目的assets目录下新建一个css目录，然后在该目录下新建一个index.scss文件，用这个文件作为scss的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值