当我们在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配置好了,放在util.js里面了

前面我们通过 cnpm i node-sass sass-loader -D    安装好了scss依赖

并在build文件夹下的webpack.base.conf.js的rules里面添加了如下配置

{

test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}

现在不需要这样配置。如果这样配置会报错,因为配置重复了。

只需将此配置删除即可

踩坑,vue项目中,main.js引入scss文件时报错的更多相关文章

  1. vue项目 安装和配置sass & main.js引入scss文件报错

    通过npm 安装 cnpm install --save-dev sass-loader cnpm install --save-dev node-sass 在build文件夹下的webpack.ba ...

  2. vue2.0 在main.js引入scss文件报错

    在vue2.0的main.js中引入scss文件报错 原因是在 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.scss$/, loade ...

  3. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  4. 【已解决】React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...

  5. React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules文 ...

  6. 在vue项目中正确的引入jquery和bootstrap

    <script>标签引入jquery在vue脚手架里并不适用,需要利用webpack引入jquery 一.第一种方法 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jq ...

  7. 在vue项目中的js文件里使用vue实例

    参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742 不为其他,就为了记录一下,方便以后查看: 第一种方法: 1.首 ...

  8. 在vue项目中正确的引入jquery

    最近学习vue,习惯性的通过<script>标签引入jquery,写完后报错才想起来,这种方式在vue是不适用的. 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jqu ...

  9. Vue项目中jQuery的引入

    1.安装jQuery依赖 npm install jquery --save-dev 2.在webpack.base.conf.js头部加入如下代码 var webpack = require(&qu ...

随机推荐

  1. file 显示文件的类型

    1. 命令功能 file命令是确定文件类型,也可以辨识一些文件的编码格式.通过文件的头部信息来获取文件类型.windows是通过扩展名来确定文件类型. 2. 语法格式 file  [option]  ...

  2. thinkphp数据库连接

    https://www.kancloud.cn/manual/thinkphp5/118059 一.配置文件定义 常用的配置方式是在应用目录或者模块目录下面的database.php中添加下面的配置参 ...

  3. Java泛型与集合笔记

    第一章 Java的泛型为了兼容性和防止代码爆炸,在编译成字节碼时会进行类型擦除,编译器自动添加代码做类型转换(用到List<Integer>的地方用Integer来做转换),自动做装箱拆箱 ...

  4. python学习笔记(十五)python操作数据库

    1.连接mysql,ip,端口号,密码,账号,数据库 2.建立游标 3.执行sql 4.获取结果 5.关闭连接,关闭游标 游标打开仓库的大门: import pymysql conn=pymysql. ...

  5. BZOJ 2726: [SDOI2012]任务安排 斜率优化 + 凸壳二分 + 卡精

    Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) # ...

  6. 流氓软件修改IE主页的解决方法

    运行regedit HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main 修改以下url Default_Page_URL Firs ...

  7. python list,dic,json型字符串转为list,dict,json

    import ast strr='{"1":"A","3":"B"}' dicts= ast.literal_eval( ...

  8. __I、 __O 、__IO是什么意思?怎么用?

    出处:http://www.chuxue123.com/forum.php?mod=viewthread&tid=122&ctid=3 __I. __O .__IO是什么意思?这是ST ...

  9. 牛客网编程练习(华为机试在线训练)-----求int型正整数在内存中存储时1的个数

    题目描述 输入一个int型的正整数,计算出该int型数据在内存中存储时1的个数. 输入描述: 输入一个整数(int类型) 输出描述: 这个数转换成2进制后,输出1的个数 示例1 输入 5 输出 2 P ...

  10. 【Visual Studio】 使用EF、 Linq2Sql快速创建数据交互层(一)

    项目伊始,创建数据库交互层代码是底层框架的首要任务.常用的做法包括手动编码.Hibernate或者动软之类的代码生成器,而多数人忽略了.Net环境下VS提供的两套非常好用的数据层工具. EF和Linq ...