在vue-cli脚手架采用scss正确的使用姿势

步骤一: 安装node-sass、sass-loader、style-loader

npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev

步骤二: 安装sass-resources-loader

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/assets/global.scss')
}
}
)

可知,我是在assets中创建了一个global.scss文件。

最后,在组件中的style标签添加lang="scss",就OK了。

=======================================================

各位如果引入和使用中有任何问题可以给我发私信联系

在vue-cli中如何安装scss,并全局引入scss的更多相关文章

  1. scss是什么?在vue.cli中的安装使用步骤是?有哪几大特性?

    css的预编译: 使用步骤: 第一步:用npm下三个loader(sass-loader.css-loader.node-sass): 第二步:在build目录找到webpack.base.confi ...

  2. 【Vue CLI】从安装到构建项目再到目录结构的说明

    目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...

  3. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  4. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  5. 在vue-cli中安装scss,且可以全局引入scss的步骤

    简历魔板__个人简历模板在线生成 在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁.适应性更强.可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss.写过的人都知 ...

  6. vue安装scss,并且全局引入

    在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁.适应性更强.可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss.写过的人都知道,每写一个.vue文件都要在st ...

  7. VUE CLI 3.0 安装及创建项目

    一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/   详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...

  8. vue工具 - vue/cli@3.xx 安装使用流程

    mac安装记得npm前边加sudo 安装脚手架,用于生成目录 npm install -g @vue/cli 安装用于编译单个的.vue文件 npm install -g @vue/cli-servi ...

  9. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  10. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

随机推荐

  1. 题解 P4305 【[JLOI2011]不重复数字】

    来一波用vector的最短代码题解 P4305 [JLOI2011]不重复数字 关于hash表的部分大家可以看一看其他的题解,我就不说了 不定长数组vector的几个基本用法: 定义: vector& ...

  2. 浅谈BST(二叉查找树)

    目录 BST的性质 BST的建立 BST的检索 BST的插入 BST求前驱/后继 BST的节点删除 复杂度 平衡树 BST的性质 树上每个节点上有个值,这个值叫关键码 每个节点的关键码大于其任意左侧子 ...

  3. 开发中常用linux命令

    1.创建目录mkdir 创建目录命令,常用的参数-p,递归创建目录 [root@web01 ~]# mkdir /data [root@web01 ~]# mkdir /data/a/b mkdir: ...

  4. Hotspot的Metaspace

    Meta Space是JDK1.8引入的,在JDK1.8使用的是方法区,永久代(Permnament Generation).元空间存储的是元信息,使用的是操作系统的本地内存(Metaspace与Pe ...

  5. 聊聊对称/非对称加密在HTTPS中的使用

    目前常用的加密算法主要分成三类: 对称加密算法 非对称加密算法 消息摘要算法 在互联网中,信息防护主要涉及两个方面:信息窃取和信息篡改.对称/非对称加密算法能够避免信息窃取,而消息摘要算法能够避免信息 ...

  6. [原创]UnLua Emmylua UE4开发环境搭建

    前言 公司开发的第二个虚幻4项目已经上线了,慢慢趋于稳定.回想起开荒的日子,历历在目.从引擎脚本的选择,各工具(导表,协议生成...)的重构.开发, 引擎扩展(多骨骼支持,Notify扩展,技能编辑器 ...

  7. sqlException 使用relace 替换单引号

    我们从前端输入数据的时候,可能会输入一些 单引号 ,的字符 导致直接进行执行sql 语句保存的时候出现错误 如: 输入的有 单引号 保存按钮小代码 <asp:Button ID="bt ...

  8. [转帖]知新之--12-factors

    知新之--12-factors https://blog.csdn.net/weixin_34233421/article/details/85819756 12-factors I. 基准代码 一份 ...

  9. 第十节:Asp.Net Core 配置详解和选项模式

    一. 各种文件的读取 1.说明 在.Net Core中,各种配置文件的读取都需要依赖[Microsoft.Extensions.Configuration]程序集,当然在Asp.Net Core中已经 ...

  10. [WeChat-Bot-Go] 记录帖

    本来是想写一个微信机器人出来,用go语言. Github   目标是想做一个自动发送消息和抢红包的bot. 一开始跟着 这篇 文章写.写着写着发现文章久远,而且用的是第一版网页微信api,所以就自己去 ...