在写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. js如何调用php文件内显示的数值到html?

    index.html <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9. ...

  2. [详细实例]MicroPython拼插编程实战:DIY一台会思考的壁障车

    (转载请注明文章来源,更多教程可自助参考www.tpyboard.com,QQ技术交流群:157816561,公众号:MicroPython玩家汇) 在日常生活中,大家会经常见到各种各样的遥控车,它需 ...

  3. L2-4 部落 (25 分)

    在一个社区里,每个人都有自己的小圈子,还可能同时属于很多不同的朋友圈.我们认为朋友的朋友都算在一个部落里,于是要请你统计一下,在一个给定社区中,到底有多少个互不相交的部落?并且检查任意两个人是否属于同 ...

  4. JS--编码规范

    1. 请修复给定的 js 代码中,函数定义存在的问题 function functions(flag) { if (flag) { function getValue() { return 'a'; ...

  5. 关于hibernate查询结果类的封装

    实际应用中,我们查询的结果有时候会需要其他的类或者是一个新的包装类,即希望映射到一个DTO(即使hibernate早在很久就不推荐使用..)但我还是说一下吧 如 我有这样子的两个类 //get和set ...

  6. HTML文字与列表

    文字内容 添加文字 <body> 我是Mingle </body> HTML文字的需要添加在<body> </body>里面. 标题字 标题字就是以几种 ...

  7. 手动用tomcat启动war包,无法访问web项目

    先说一下自己采的小坑,网上大多解答都是复制来复制去,不说重点在哪.我这里简单总结下访问路径问题 一.用idea打成war包,具体步骤如下图: 步骤:在项目配置选Artifacts新建Web Appli ...

  8. Java的selenium代码随笔(3)

    /** 以下方法主要用于切换页面*/public void SetPageSwitch(String pageTitle) {Set<String> allWindowsHandles = ...

  9. JDBC工具类完整版!

    package com.aaa.util; import java.sql.*; import java.util.ArrayList; import java.util.HashMap; impor ...

  10. Visual Studio 2019 (VS2019)正式版安装 Ankh SVN和VisualSVN插件

    VS2019 正式版最近刚刚推出来,目前 Ankhsvn 还不支持,它最高只支持 VS2017,全网搜索了一下,也没有找到.在 Stackoverflow 上看了一下,找到这篇问答: 自己按照这种方法 ...