在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. tomcat启动后,跳转到项目指定页面

  2. MySQL基于 amoeba.xml的读写分离

    1.准备两台服务器  centos7 192.168.52.35 192.168.52.36 2.关闭防火墙 [root@localhost ~]# systemctl stop firewalld ...

  3. Layui 新标签打开

    原文:https://blog.csdn.net/sr_www/article/details/81394365 layuiAdmin 后台管理模板 iframe版 在新标签中打开网页 / 在ifra ...

  4. flex布局整理以及demo

    flex: 概念: flex容器: display:flex flex项: 轴:水平的主轴.垂直的交叉轴 容器的属性: 1. flex-direction(决定主轴的方向.即项目的排列方向) 1.1 ...

  5. 未能加载文件或程序集“***”或它的某一个依赖项,拒绝访问 <解决方法>

    报错信息如下: 注:为了部分隐私安全需要,已将有问题文件名替换为filename,系统win2008R2,Microsoft .NET Framework 版本:4.0.30319; ASP.NET ...

  6. csv文件处理

    读取csv文件 import csv with open('demo.csv', 'r') as fp: reader = csv.reader(fp) titles = next(reader) f ...

  7. Idea 进行断点调试的 快捷键

    快捷键 功能描述F8 单步调试,不进入函数内部F7 单步调试,进入函数内部Shift+F7 选择要进入的函数Shift+F8 跳出函数Alt+F9 运行到断点Alt+F8 执行表达式查看结果F9 继续 ...

  8. nginx+keepalived高可用及双主模式【h】

    高可用有2中方式. 1.Nginx+keepalived 主从配置 这种方案,使用一个vip地址,前端使用2台机器,一台做主,一台做备,但同时只有一台机器工作,另一台备份机器在主机器不出现故障的时候, ...

  9. 《Linux就该这么学》培训笔记_ch16_使用Squid部署代理缓存服务

    <Linux就该这么学>培训笔记_ch16_使用Squid部署代理缓存服务 文章最后会post上书本的笔记照片. 文章主要内容: 代理缓存服务 配置Squid服务程序 正向代理 标准正向代 ...

  10. 基于ELK 7.50搭建elastalert 监控报警和权限控制

    ELK+监控报警全步骤 需求: 公司要求对出在windows服务器上的日志进行日志分析并根据关键字进行报警,并配置kibana权限控制.下面为详细步骤 环境: centos 7.6 elk版本7.50 ...