在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁、适应性更强、可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss。写过的人都知道,每写一个.vue文件都要在style上面@import global.scss文件的话,这样很麻烦。css文件可以在main.js中可以直接import,而scss文件import会报错,因此记录下处理的方法。

1. npm install node-sass --save-dev

npm install sass-loader --save-dev

npm install style-loader --save-dev

2. npm install sass-resources-loader --save-dev

3.修改build中得utils.js

scss: generateLoaders('sass')

    修改成:

    scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/global.scss')
}
}
)

4.修改scss文件名为global.scss

vue安装scss,并且全局引入的更多相关文章

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

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

  2. vue 安装scss

    1.安装插件 npm install node-sass --save-devnpm install sass-loader --save-dev 在App页面测试是否可用,在style 上添加< ...

  3. vue cli web pack 全局引入jquery

    之前 装过,装 npm i —save  jquery  然后直接执行了第二步 往后 1,首先在 package.json 里加入, 然后 npm install 2, 在webpack.base.c ...

  4. 【vue】——CDN或全局引入CSS、JS。

    在入口文件index.html中添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式

    最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...

  6. vant库在vue全局引入toast组件

    第一步: 在config中引入 // 全局引入vant的提示框 import { Toast } from "vant"; Vue.use(Toast); 第二步: 在组要的.vu ...

  7. vue按需引入/全局引入echarts

    npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 ...

  8. Vue全局引入JS的方法

    两种情况: 1. js为ES5的写法时,如下(自定义的my.js): function fun(){ console.log('hello'); } Vue中的全局引入方式为,在index.html中 ...

  9. vue项目安装scss,以及安装scss报错(this.getResolve is not a function)

    1.安装scss: npm install node-sass sass-loader vue-style-loader --save-dev //安装node-sass sass-loader vu ...

随机推荐

  1. Bootstrap日期和时间表单组件

    http://www.bootcss.com/p/bootstrap-datetimepicker/ 项目 MarketPoint

  2. CF618F Double Knapsack 构造、抽屉原理

    传送门 首先,选取子集的限制太宽了,子集似乎只能枚举,不是很好做.考虑加强限制条件:将"选取子集"的限制变为"选取子序列"的限制.在接下来的讨论中我们将会知道: ...

  3. 迄今为止 .Net 平台功能最强大,性能最佳的 JSON 序列化和反序列化库。

    Swifter.Json 这是迄今为止 .Net 平台功能最强大,性能最佳的 JSON 序列化和反序列化库. Github : https://github.com/Dogwei/Swifter.Js ...

  4. openstack第四章:neutron— 网络服务

    第四篇neutron— 网络服务 一.neutron 介绍:   Neutron 概述 传统的网络管理方式很大程度上依赖于管理员手工配置和维护各种网络硬件设备:而云环境下的网络已经变得非常复杂,特别是 ...

  5. 04-JavaScript之常见运算符

    JavaScript之常见运算符 1.赋值运算符 以var x=12,y=5来演示示例 运算符 例子 等同于 运算结果 = x=y   x=5 += x+=y x=x+y x=17 -= x-=y x ...

  6. chattr文件锁

    chattr文件锁 chattr 和lsattr [root@1 ~]# whereis chattr #---查看chattr命令 chattr: /usr/bin/chattr /usr/shar ...

  7. 前后端不分离的springboot项目问题:页面框架问题

    前言:最近自己想搞一个以springboot开发的web项目,由于页面布局问题,在前期开发的时候没有太注意,每天写一点现在开发到一半出现了一个大问题. 1.先说说整个网站框架搭建问题:(整个项目前后端 ...

  8. AI佳作解读系列(一)——深度学习模型训练痛点及解决方法

    1 模型训练基本步骤 进入了AI领域,学习了手写字识别等几个demo后,就会发现深度学习模型训练是十分关键和有挑战性的.选定了网络结构后,深度学习训练过程基本大同小异,一般分为如下几个步骤 定义算法公 ...

  9. HttpInvoker http请求工具类

    import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import j ...

  10. DAY12、装饰器

    一.补充:nonlocal关键字 1.作用:将L与E(E中的名字需要提前定义)的名字统一 2.应用场景:如果想在被嵌套的函数中修改外部函数变量(名字)的值 3.案例: def outer():    ...