呢呢 Blog 呢呢 Blog
首页
  • 前端

    • web Worker使用笔记
  • 博客搭建

    • 快速上手
文集
  • 前端公用方法
关于
  • 网站
  • 资源
  • Vue资源
  • 友情链接
GitHub
首页
  • 前端

    • web Worker使用笔记
  • 博客搭建

    • 快速上手
文集
  • 前端公用方法
关于
  • 网站
  • 资源
  • Vue资源
  • 友情链接
GitHub
  • 前端

    • vscode插件同步
    • markdown语法
    • webpack笔记
    • web Worker使用笔记
    • vue-cli4设置打包相对路径
    • vue-cli4配置scss全局变量
    • TOAST UI Editor 使用方法
  • 博客搭建

  • 微前端

  • Cesium天地图

  • bug记录

  • vuepress

  • 浏览器架构及原理

  • photoshop

  • vue3+vite

  • react

  • 编程
  • 前端
Ostask
2021-01-29

vue-cli4配置scss全局变量

最近写自己的博客,打算使用scss,但是使用scss的时候不想每个组件都引入variable.scss,于是网上找了好多方法,此为亲测可用的方法

  1. 安装“node-sass”, “sass-loader”,“style-loader”
  2. vue.config.js配置
module.exports = {
  css: {
    // css预设器配置项
    loaderOptions: {
		sass: {
		  additionalData:`@import "./src/style/varible.scss";`
		}
	}
  },
}
1
2
3
4
5
6
7
8
9
10
  1. 然后就可以在组件里随便用了
<style lang="scss" scoped>
#app{
 background: $background;
}
</style>
1
2
3
4
5

改天还是得好好研究研究这些配置呀,感觉能做挺多事的

编辑
上次更新: 2021/07/22, 09:07:42
vue-cli4设置打包相对路径
TOAST UI Editor 使用方法

← vue-cli4设置打包相对路径 TOAST UI Editor 使用方法→

最近更新
01
react全家桶搭建全家桶模板
10-19
02
react学习到搭建一个全家桶的基础模板
10-09
03
202108自修图
09-24
更多文章>
Theme by Vdoing | Copyright © 2020-2021 Ni Ni | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×