1,需要在项目中使用sass/scss 功能需要先在项目中安装,安装方法:

cnpm install node-sass --save-dev //安装node-sass
cnpm install sass-loader --save-dev //安装sass-loader
cnpm install style-loader --save-dev //安装style-loader

2,安装完成后找到build文件夹下面的webpack.base.conf.js文件,然后在rules里面添加一下配置:(新版的vue已经在utils.js中配置好了sass,不需要添加此配置)

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}

3,使用的时候在style标签中添加  lang=“scss” 即可。

 

添加完lang运行后发现报错:Modele build failed: TypeError: this.getResolve is not a function at Object.loader..........

原因是 sass-loader版本过高,需要运行 npm uninstall sass-loader(卸载当前版本),然后在重新安装低版本 npm install sass-loader@7.3.1 --save-dev;

在重新编译一下就可以了。

*

*

*

如果需要全局引入公共样式需要先运行 npm install sass-resources-loader --save-dev 安装依赖

然后将build中的utils.js中的scss: generateLoaders('sass'),修改成

scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/style/public.scss') //公共样式的路径
} } ),

现在就可以直接在组件中使用这个公共样式了,使用方法在组件中引入:

<style scoped="scoped" lang="scss">
@import "@/style/public.scss";
</style>

如果需要整个项目引入(全局引入),可以直接在main.js里面引入:(如果出现报错,可能是第二步中重复配置了sass,删除webpack.base.conf.js中的sass配置即可)

import './style/public.scss'

完工!!!

sass 安装过程中的坑的更多相关文章

  1. flutter 安装过程遇到的坑

    Flutter是一个移动应用程序的软件开发工具包(SDK),用一个代码库构建高性能.高保真的iOS和Android应用程序.目标是使开发人员能够为Android和iOS提供自然的高质量的应用,在滚动行 ...

  2. HUE安装过程中的一些坑

    1. gcc: error: krb5-config:: No such file or directory 执行安装krb5-devel yum provides krb5-config 得到提示: ...

  3. Torch-RNN运行过程中的坑 [0](一些基础概念)

    0.Lua & LuaJIT简介 Lua 是一种轻量小巧的脚本语言,用标准C语言编写并以源代码形式开放, 其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能. Lua 是巴 ...

  4. kubernetes安装过程中遇到问题及解决

    系列目录 根据机器环境的不同,有的可能一次就安装成功,有的则可能遇到各种各样的坑需要排查.建议不熟悉linux的用户使用全新的环境来安装kubernetes.以下记录本人在安装过程中遇到的问题及解决方 ...

  5. JAVA安装过程中出现的“javac不是内部或外部指令”的解决方法

    近来重新安装了JAVA,安装过程中出现问题,网上找到解决办法,汇总发布. 解决流程: 1.确定自己的环境变量设置没问题,没有出现遗漏 : . 等情况 (具体环境变量设置百度) 2.环境变量设置后 ,d ...

  6. SQL Server 2008 安装过程中遇到“性能计数器注册表配置单元一致性”检查失败 问题的解决方法

    操作步骤: 1. 在 Microsoft Windows 2003 或 Windows XP 桌面上,依次单击"开始"."运行",然后在"打开&quo ...

  7. 用友ERP-U8最新破解(再次更新版本,附安装过程中的解决办法)

    新版用友u8.70下载地址:http://ftp.shangyuchem.com/应用软件/用友ERP-U8管理软件(8.70版).rar 准备好安装环境,因为需要SQLSERVER和IIS支持,而个 ...

  8. cocoapods安装以及使用,安装过程中ruby版本过低

    cocoapods安装以及使用,安装过程中ruby版本过低 字数473 阅读103 评论1 喜欢2 1.打开终端 2.移除现有 Ruby 默认源 $ gem sources --remove http ...

  9. iOS 学习笔记二【cocopods安装使用和安装过程中遇到的问题及解决办法】【20160725更新】

    在osx 10.11之前cocopods问题不多,但是升级到11之后的版本,之前的cocopods大多用不了,需要重新安装,对于我这种使用测试版系统的技术狂来说,每次都需要重新安装很多东西, 当然,c ...

随机推荐

  1. apache+php+mysql搭建php环境

    1.首先准备解压包:zend-loader-php5.6-windows-x86_update1(nts版).php-5.6.37-nts-Win32-VC11-x86.mysql-5.5.19-wi ...

  2. 去除word文档页眉处的横杠

    ​ 如何去除上图word文档页眉处的横杠 wps软件使用者 第一步双击页眉,到页眉页脚: ​ 第一步点击上图页眉横线,点击无线型或者删除横线即可: ​ ​ ​ Microsoft Office 专业增 ...

  3. 03-MyBatis拦截器机制

    目录 MyBatis拦截器介绍 拦截器的使用 拦截器介绍及配置 源码分析 总结 本文转载自MyBatis拦截器原理探究 MyBatis拦截器介绍 MyBatis提供了一种插件(plugin)的功能,虽 ...

  4. NW.js打包一个桌面应用

    1.安装nw(可以到官网:https://nwjs.io下载) npm install nw -g 2.创建一个最最简单的nw应用 在nwjs文件夹中 新建index.html和package.jso ...

  5. [LC]83题 Remove Duplicates from Sorted List(删除排序链表中的重复元素)(链表)

    ①英文题目 Given a sorted linked list, delete all duplicates such that each element appear only once. Exa ...

  6. 区块链原理、设计与应用pdf电子版下载

    链接:https://pan.baidu.com/s/1koShkDjEYOXxLOewZJU2Rw 提取码:8ycx 内容简介  · · · · · · 本书由专业区块链开发者撰写,是区块链开发起步 ...

  7. 分组取topN

    假设有这样一个文件,文件内容如下 class1 class2 class1 class1 class2 class2 class1 class2 class1 class2 要求按照班级分组取出每个班 ...

  8. suseoj 1212: 推箱子问题(bfs)

    1212: 推箱子问题 时间限制: 1 Sec  内存限制: 128 MB提交: 60  解决: 13[提交][状态][讨论版][命题人:liyuansong] 题目描述 码头仓库是划分为n×m个格子 ...

  9. 力扣(LeetCode)第一个错误的版本 个人题解

    你是产品经理,目前正在带领一个团队开发新的产品.不幸的是,你的产品的最新版本没有通过质量检测.由于每个版本都是基于之前的版本开发的,所以错误的版本之后的所有版本都是错的. 假设你有 n 个版本 [1, ...

  10. man 与 help

    man帮助文档被划分为节 序号 节号 说明 1 1 命令帮助信息 2 2 系统调用函数的帮助信息(内核提供的接口函数) 3 3 库函数帮助信息 4 4 设备文件帮助信息 5 5 配置文档帮助说明 6 ...