当我们在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. OGG复制进程延迟不断增长

    1.注意通过进程查找sql_id时,进程号要查询两次 2.杀进程的连接 https://www.cnblogs.com/kerrycode/p/4034231.html 参考资料 1.https:// ...

  2. python3 使用 django-xadmin 遇到的许多坑

    几乎所有公司项目都是python2的, xadmin对Python2 很友好,对Python3 很不友好, 所以在Python3 环境下使用xadmin遇到了许多意想不到的坑,在这里记录并分享一下: ...

  3. 16.go语言基础学习(上)——2019年12月16日

    2019年12月13日10:35:20 1.介绍 2019年10月31日15:09:03 2.基本语法 2.1 定义变量 2019年10月31日16:12:34 1.函数外必须使用var定义变量 va ...

  4. 用Jquery方法实现的简单下滑菜单效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. python 全栈开发,Day45(html介绍和head标签,body标签中相关标签)

    一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来指定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...

  6. Promise和async/await

    1.promise对象 promise 对象有三种状态:pending(进行中).fulfilled(已成功)和 rejected(已失败).promise 对象的状态改变,只有两种可能:从 pend ...

  7. 【HDOJ6623】Minimal Power of Prime(Powerful Number)

    题意:给定大整数n,求其质因数分解的最小质数幂 n<=1e18 思路:常规分解算法肯定不行 考虑答案大于1的情况只有3种:质数的完全平方,质数的完全立方,以及p^2*q^3,p,q>=1三 ...

  8. 阿里云code下载代码和更新代码

    1- 本地新建一个文件夹,进入文件夹下面右击打开git 2- Git init初始化一个.git文件夹 3- Git clone git@code.aliyun.com:username/space- ...

  9. list_car()函数小记

    一 ,list_car  ,前端传过来参数字典,从字典中获取参数 二, 根据参数去数据库中查找,条件查找 三,将查找出来的对象,flask_sqlalchemy.BaseQuery,然后通过这个对象的 ...

  10. 麦子lavarel---16、日志

    麦子lavarel---16.日志 一.总结 一句话总结: 一定要养成打印日志查看日志的好习惯,非常节约时间和便于查错 1.console.Log(“获取类别数据:"):console.Lo ...