搭建nuxt框架过程中发现import导入scss文件无法识别

最新推荐文章于 2023-02-22 10:10:53 发布
最新推荐文章于 2023-02-22 10:10:53 发布
阅读量674 收藏
点赞数
分类专栏： vue nuxt 文章标签： scss vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55458088/article/details/126787860
版权
nuxt 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
vue
1 篇文章 0 订阅
订阅专栏

前提：已经安装sass跟sass-loader

直接在vue模板中用lang=scss能够正常识别

然后在style标签里面import url(./test.scss)的方式引入样式文件就会一直报Can't resolve './test.scss' ,

按照官网的方式配置loaders.cssModules也没用

后升级webpack发现其他问题，回退之后重新安装以来，然后报vue（2.6.14）版本跟vue-template-compiler（2.7.10）版本不一致的错误（不知道之前运行为啥一直没报错）

然后把vue-template-compiler安装为跟vue匹配的版本（2.6.14）

然后重新运行，神奇地发现没问题了，import导入scss文件没问题了，所以把loaders.cssModules配置删掉了

ssheepsean
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解nuxt sass全局变量(公共scss解决方案)
11-30
恩，经过朋友的帮助搞定的，因为 nuxt资料比较少的原因，很感谢  “包子”的帮助 注意  本案例  只是把你通用 的 比如  $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722 ; 以上这种通用的变量抽出来，方便你在其他scss的样式里面调用 比如 li { background: nth($colour,6) } 只存储变量，别放公共的样式进去切记公共的样式 你可以参考我之前的博客那种写法  我直接上案例吧sass_jb51.rar 案例里面有运行说明 我建议你还是跟我一步一步来走，比较刻骨铭心 第一步新建文件夹
Nuxt3.3中使用scss
最新发布
~~
04-16 503
这个版本默认是不能使用scss的，我们只需要安装sass包即可在项目中直接使用scss了，什么都不用配置。
【vue】VUE项目中，MAIN.JS引入SCSS文件时报错
庭落
04-24 1604
当我们在src目录下创建.scss文件，并在main.js中引用，运行时会报： ERROR Failed to compile with 1 errors 5:25:07 PM This relative module was not found: * ./main.scss in ./src/main.js 如图所示 解决方法： 新版本的vue-cli已经帮我们把sass-loader配置...
报错 - 项目直接引入 .scss文件报错及解决方案
sunshime的博客
07-19 1910
  近期项目中直接使用了scss 发现报错了，这个导致的原因我到现在都不是很了解，只是大概知道是 node 的原因，不过解决方法已经找到了的。下面分享一下： 一、报错 ./src/components/alert_tip/alert_tip.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!
通过@import 后的css 没有被postcss-loader 处理（importLoader的使用） 解决办法
m0_38013931的博客
08-09 999
针对一些css通过@import 的方式引入后，没有被postcss-loader处理的场景： index.css ： @import './test.css' webpack.config.js module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] } ] } postcss.config.js m
在NuxtJS中使用scss语法
qq_31569459的博客
02-22 670
这时候会发现在页面中还不能使用全局定义的scss变量，还需要一个插件@nuxtjs/style-resources。这里要指定sass-loader版本，最新版本可能会存在webpack、nuxt版本不兼容问题。新建common.scss文件，设置全局样式比如主题色，字体大小什么的。scss文件要在全局使用的话在nuxt.config.js引用一下。注意：一定要写上lang="scss"才可以使用scss语法。提一嘴不要需要安装node-sass，坑。在nuxt.config.js中配置。
nuxt sass全局变量也就是公共 scss 解决方案 案例
11-02
主要针对 nuxt引入 sass 和 其中一个scss文件抽出来作为公共变量存储文件的解决方案，因为官方案例少，目前用的人少，所以贴出来分享下
nuxt框架中路由鉴权之Koa和Session的用法
12-09
博客的后台管理页面需要有登录系统，所以考虑做一下路由鉴权，实现方式也是 Nuxt 官网给出栗子来改写，顺便也将前后端路由给统一了。 路由拦截 前端方面主要通过利用 Nuxt 的中间件来做路由拦截，这里也是需要 Vuex ...
nuxt框架中对vuex进行模块化设置的实现方法
12-04
1.Nuxt里怎么使用vuex? Nuxt.js 内置引用了 vuex 模块，所以不需要额外安装。 Nuxt.js 会尝试找到应用根目录下的 store 目录，如果该目录存在，它将做以下的事情： 1.1> 引用 vuex 模块 1.2> 将 vuex 模块 加到 ...
vue中 css文件引入失败等问题
白鸽
03-03 5511
1、全局引用css文件 main.js 作为一个入口文件可以全局引用css文件 在main.js中加入 import '../static/css/bootstrap/study/bootstrap.min.css' 值得注意的是如果是boostrap.css 文件，是需要这一些图标库的 如果没有这些，引入bootstrap css文件，项目编译时，会报这些module不存在。 因此我们只需要去bootstrap 官网下这些库就行了。但是还有一点需要注意：这些文件需要放在fonts目录下，并且boo
no mixin name ‘xx‘ 导入scss出错
qq_41961638的博客
09-14 3345
例如本文件名为aa.vue，命名对应的scss文件为aa.scss 还需要引用别的scss文件bb.scss和cc.scss。这时候引用出错了，原因可能是： 1、在aa的style写明lang的类型。 2、注意文件排布的顺序，aa想引用bb和cc，需要放后面，cc想引用bb要放其后面。 <style lang="scss"> @import './../assets/scss/bb.scss'; @import './../assets/scss/cc.scss'; @import '
Nuxt.js 使用scss(sass)的方法
前端一线搬运工的博客
12-21 1万+
一: 安装需要用到的loader npm install --save-dev node-sass sass-loader 官方文档传送门: css配置  二: 页面调用(注意不要漏了lang="scss",不是sass) &lt;style lang="scss"&gt;//注意!这里很关键,很多配置成了不编译就是漏了lang="scss"     @import '../ass...
scss配置全局混入，神坑，mixin的文件名不能是mixin
kongduxue的专栏
09-13 4075
找到build/util,js文件找到以下类似的代码块，配置scss的loader如下代码： 1.首先安装sass-resources-loader npm install sass-resources-loader --save-dev 2.全局引入变量文件(_variable.scss)和混入文件(_mymixin.scss), return { css: generat...
sass中@import导入混淆指令文件无效的原因
热门推荐
我爱吃豆芽呀
08-27 1万+
Sass 拓展了@import的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。 但在以下情况下，@import仅作为普通的 CSS 语句，不会导入任何 Sass 文件。 文件拓展名是.css； 文件名以http://开头； 文件名是url()； @import包含 media queries。 如果不在上述情况内，文件的拓展名是.scss或...
nuxt安装node-sass sass-loader失败
EStringDoggi的博客
02-27 1352
npm安装node-sass sass-loader失败，报错信息似乎和python有关，在这里下载安装了python环境后再重新安装node-sass依旧失败了。 随后解决方案：执行npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/，再次npm i node-sass sass-loader -D，安...
Node-Sass安装失败引发的思考
weixin_33796205的博客
04-13 237
在mac OS或liunx系统下，有时候在安装node-sass时会出现，Permissions Errors 可能出现的情况是这样: 阅读后你将得到什么 你将成功的解决node-sass安装不了苦恼（相同或类似的问题） 不仅仅是node-sass，其他模块如此类问题，同样可以解决 你将获得处理此类问题的，多种解决方案 你将了解到出现此类问题的原因，以及如何避免此类问题 错误分析 找到...
Nuxt脚手架创建项目后无法使用sass的解决方法
weixin_43964148的博客
01-30 690
安装 . 这两个哦。
scss中引入字体找不到的问题
LJJ_3的博客
12-03 629
scss中引入字体找不到的问题 在项目中引入一个字体文件，路径写法都没错，但是就是找不到这个文件 最终解决：使用~@即可
nuxt及vue中使用SCSS做预编译 /deep/ 报错解决办法
Eric_web的博客
04-16 1184
在 SCSS 中,>>> 不起作用. 以前做项目的时候, 用 /deep/ 进行穿透都是成功的, 但是, 在 nuxt 中, 使用却报错: /deep/ .el-input__inner { border: 1px solid $main-color !important; } /deep报错/ 经过各种查找之后, 终于在 vue-loader 官网看到这样一句话: vue-loader 于是我尝试用 ::v-deep 替换 /deep/ , 成功解决了问题. :v-deep .
nuxt框架中middleware简单使用
03-06
中间件是 Nuxt 框架中的一个重要概念，它可以在页面渲染之前执行一些操作，比如验证用户身份、获取数据等。在 Nuxt 中，我们可以通过编写中间件来实现这些操作。简单使用中间件的方法是在 middleware 目录下创建一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值