通过npm 安装

cnpm install --save-dev sass-loader

cnpm install --save-dev node-sass

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

{

  test: /\.scss$/,

  loaders: ['style', 'css', 'sass']

}

上面那条配置可以省略，因为最新的vue-cli已经是默认配置好sass的（在build/util.js里），所以如果再在webpack里配置会重复，因此在main.js引入scss文件时会报错，也就是所只要安装了sass就行，什么都不用配置了

sass语法教程

vue项目 安装和配置sass & main.js引入scss文件报错的更多相关文章

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

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

  2. 踩坑，vue项目中，main.js引入scss文件时报错

    当我们在src目录下创建.scss文件,并在main.js中引用,运行时会报: ERROR Failed to compile with 1 errors 5:25:07 PMThis relativ ...

  3. vue引入css文件报错Unrecognised input

    一个vue项目中用到了swiper插件,引入swiper.css时报错 显示引入的css文件Unrecognised input ,在文件的line4,column12 . 其实是引入位置不对,样式文 ...

  4. vue项目过程的理解： main.js文件理解 router.js文件理解 以及组件 路由 等之间的关系

    https://blog.csdn.net/qq_26229005/article/details/85040393 内容太多了,有空再整理

  5. Vue项目中使用webpack配置了别名，引入的时候报错

    chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/as ...

  6. Vue.js项目引入less文件报错解决

    解决方案: 需要局部安装vue-style-loader,less-loader,css-loader,vue-loader和less包(需注意就算全局安装以上包仍需局部安装) 即:npm i vue ...

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

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

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

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

  9. 本地Vue项目跨域请求本地Node.js服务器的配置方法

    前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...

随机推荐

  1. READING | 我是一只IT小小鸟

    “世界是如此的熙熙攘攘,让年轻的心找不到方向,但这些人是不能小看的啊,如果他们开始敲打自己的命令行.” “知之者不如好知者,好之者不如乐之者”,很多IT界的优秀人才都对计算机技术或者IT技术有着浓厚的 ...

  2. naptime

    naptime 有一个长度为n的序列\(a_i\),首尾相接组成了一个环,现在要在这个环上选出若干个区间,使区间长度之和恰好为b,然后忽略区间的顺时针开头元素,权值累加区间中所有的数字,问权值的最大值 ...

  3. springboot在工具类中添加service的方法，显示为空的解决方案

    @Component// 1.将工具类声明为spring组件,这个必须不能忘 public class TestUtils { //2.自动注入 @Autowired private ItemServ ...

  4. LUOGUP3498 [POI2010]KOR-Beads (哈希)

    传送门 解题思路 这是一道上周的考试题...当时考的时候看了一眼,"呀,这不是调和级数,nlogn么!!!" ,然后一写就写了个n^2的....结果边界还弄错40分滚蛋了..正解就 ...

  5. mysql order by排序查询速度问题

    SELECT * FROM `assets_message` LEFT JOIN purchase_message ON assets_message.purchase_id = purchase_m ...

  6. memcache课程---2、php如何操作memcache

    memcache课程---2.php如何操作memcache 一.总结 一句话总结: windows下装好memcache.exe,装好memcache的php扩展之后,然后使用memcache函数库 ...

  7. CDATA标签用法

    今天在xml文件里看到有CDATA标签的使用,   答案如下: CDATA 术语 CDATA 指的是不应由 XML 解析器进行解析的文本数据(Unparsed Character Data). 在 X ...

  8. Android之TableLayout表格布局

    1.相关属性 1.1.常用属性 android:collapseColumns 设置需要被隐藏的列的序列号 android:shrinkColumns 设置允许被收缩的列的序列号 android:st ...

  9. 反编译之paktool工具

    1.官网配置mac教程https://ibotpeaches.github.io/Apktool/install/ (1)右键选择:链接储存为(命名:apktool,格式:选择所有文件): (2)下载 ...

  10. java基础之二维数组不定义列数

    有一种特殊的二维数组,它的行数确定,但是每行的列数不确定.这样的的数组实现方法:先创建制定行数,列数缺省的二维数组,然后对数组的每一行重新初始化.举例如下: package day5; //第二种定义 ...