当我们在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. 浅谈ContextLoaderListener及其上下文与DispatcherServlet的区别

    一般在使用SpingMVC开发的项目中,一般都会在web.xml文件中配置ContextLoaderListener监听器,如下: <listener> <listener-clas ...

  2. CSS3 Animations

    CSS Animations 是CSS的一个模块,它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理.关键帧动画的行为可以通过指定它们的持续时间,它们的重复次数以及它们如何重复来控制. an ...

  3. django之静态文件的设置

    一:静态文件 Django中提供了一种解析的方式配置静态文件路径.静态文件可以放在项目根目录下,也可以放在应用的目录下,由于有些静态文件在项目中是通用的,所以推荐放在项目的根目录下,方便管理. 为了提 ...

  4. VUE 生成二维码插件

    原文:https://www.jianshu.com/p/496fd1cbee8d npm install qrcodejs2 --save 页面中引入 dom 结构 JS 方法编写 export d ...

  5. RMQ HelloWorld

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11791681.html Project Directory Maven Dependency < ...

  6. php str_word_count()函数 语法

    php str_word_count()函数 语法 作用:计算字符串中的单词数.大理石平规格 语法:str_word_count(string,return,char) 参数: 参数 描述 strin ...

  7. [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to 'org.eclipse.jst.j2ee.server:lovemu' did not find a matching property.

    [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to 'org.eclipse.js ...

  8. thinkphp 带检索参数分页

    模板文件中,提交搜索内容要用get方法,同时设置g.m.c隐藏域. <form action="{:U('Sck/qbscHjsc')}" method="get& ...

  9. jsc2019_qualD Classified

    题目大意 给你一个有n个点的完全图 求一种方案是的给边染色后任何一点不能沿一种颜色的边走奇数条边回到这个点 要求颜色数最少 分析 考场上输出格式打错见祖宗... 我们每次找一个最大二分图将其染一个新颜 ...

  10. ruby+selenium-webdriver测试

    参考这里的博客https://www.cnblogs.com/smiling007/p/5116662.html