通过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. win 10安装Nginx,php,mysql 小计

    一直没有尝试Nginx作为Web服务器,时常用的是apache,在Ubuntu下,输入一些安装命令就可以把LAMP环境比较轻松的搭建起来. 系统: windows 10 NT ,Nginx-1.14. ...

  2. idea-----使用相关快捷键

    1.快速格式化代码:Ctrl+Alt+L 2.快速引入get.set方法:ALT+insert 3.win 10锁屏:win+L 4.查找接口实现类的快捷键:ctrl+alt+b

  3. Http协议之content

    用android 通过http协议提交数据至服务器 content的内容 代码如下: private static JSONObject connUpload(String baseUrl, Map& ...

  4. VS2010-如何建立并运行多个含有main函数的文件

    一.先说两个概念,解决方案与工程 在VS2010中,工程都是在解决方案管理之下的.一个解决方案可以管理多个工程,可以把解决方案理解为多个有关系或者没有关系的工程的集合. 每个应用程序都作为一个工程来处 ...

  5. iOS之String动态书写

    /** String动画书写出来 @param string 要写的字 @param view 父视图 @param ui_font 字体大小 @param color 字体颜色 */ - (void ...

  6. JS对象迭代v-for

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  7. SpringMVC学习总结

    SpringMVC部分重点组建介绍 前端处理器(DispatcherServlet):接受请求,响应结果,是SpringMVC的核心 处理映射器(HandlerMapping):根据URL去查找处理器 ...

  8. python 第三方库的安装方法

    一.看更大的python世界 python 全球计算生态的主站:python 社区 www.pypi.org 二.安装第三方库 1) pip 命令安装方法 1.1 安装第三方库 命令行输入pip in ...

  9. css3之文本text-overflow 与 word-wrap, word-break

    CSS3 Text Overflow属性 CSS3文本溢出属性指定应向用户如何显示溢出内容 语法: text-overflow:clip | ellipsis 但是text-overflow只是用来说 ...

  10. jqGrid的subGrid子表格

    使用完整jqGrid作为子表格 使用子表格,涉及到jqGrid的三个选项: subGrid :首先必须将jqGrid的subGrid选项设置为true,默认为false:当此项设为true的时候,Gr ...