当我们在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. ps:不规则选区

    尽管我们学会了如何添加减去或是交叉选区,但选取出来的选区还是比较规则,不是矩形就是圆形,这样的形状很难胜任在实际制作中的需要.现在我们就要学习如何建立一个任意形状的选区.建立任意选区的工具是套索工具. ...

  2. CSS3 nth-of-type(n)选择器 last-of-type选择器 nth-last-of-type(n)选择器 CSS3 only-child选择器 only-of-type选择器

    CSS3 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素.当某个元素中的子元 ...

  3. mysql 通过navicat 添加函数或者过程

    1. 添加函数时, 函数参数的  varchar(255) 一定要加上 255,返回也要加.不加一直保存不了,狂试: 2. 添加过程时, 进入课程体 编辑时  也要加上 varchar 的位数限制.不 ...

  4. python数据分析第二版:pandas

    一:pandas 两种数据结构:series和dataframe series:索引(索引自动生成)和标签(人为定义)组成---返回一个对象 obj = pd.Series([1,2,3,4]) ob ...

  5. 【leetcode】1038. Binary Search Tree to Greater Sum Tree

    题目如下: Given the root of a binary search tree with distinct values, modify it so that every node has ...

  6. 【leetcode】447. Number of Boomerangs

    题目如下: 解题思路:我首先用来时间复杂度是O(n^3)的解法,会判定为超时:后来尝试O(n^2)的解法,可以被AC.对于任意一个点,我们都可以计算出它与其余点的距离,使用一个字典保存每个距离的点的数 ...

  7. html from表单异步处理

    from表单异步处理. 简单处理方法: jQuery做异步提交表单处理, 通过$("#form").serialize()将表单元素的数据转化为字符串, 最后通过$.ajax()执 ...

  8. flask中获取request的参数的方法

    request请求总体分为两类: 1.get请求 访问时会在地址栏直接显示参数不安全,且参数大小比较小. 2.post请求 参数不显示在地址栏,一般用户注册.登录都通过post请求完成. flask获 ...

  9. 解决IDEA输入法输入中文候选框不显示问题

    本机环境为: 系统: win7        jdk版本:jdk1.8.0_65      idea版本:2017.2.3 解决方法:关掉idea,进入idea的安装目录找到jre64文件夹重命名为j ...

  10. ORA-00020: maximum number of processes (800) exceeded

    [oracle@db04-1 ~]$ sqlplus -prelim / as sysdba SQL*Plus: Release 11.2.0.3.0 Production on 星期四 8月 31 ...