vue使用scss
创始人
2025-05-31 21:27:49
0
  • 下载node/确认node版本

node版本使用node -v命令查看

  • 安装node-sass、sass-loader

node、node-sass、sass-loader版本需要对应,node-sass和sass-loader使用npm list命令查看,node和node-sass对应关系如下表:

node-sass和sass-loader的对应关系如下:

sass-loader 4.1.1,node-sass 4.3.0

sass-loader 7.0.3,node-sass 4.7.2

sass-loader 7.3.1,node-sass 4.7.2

sass-loader 7.3.1,node-sass 4.14.1

sass-loader 10.0.1,node-sass 6.0.1

npm uninstall sass-loader node-sass --save-dev
npm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev
  • 安装sass-resources-loader插件

是样式资源处理器,主要作用是导入一些公共的样式文件,比如:variables / mixins / functions,避免在每个样式文件中手动的@import导入。

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

vue.config.js配置

//scss公共文件配置
chainWebpack: config => {const oneOfsMap = config.module.rule('scss').oneOfs.store;oneOfsMap.forEach(item => {item.use('sass-resources-loader').loader('sass-resources-loader').options({//一些公用的scss文件resources: ['./src/css/colorCommon.scss', './src/css/colorMoudle.scss', './src/css/mixin.scss']}).end()})
}

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
【Ctfer训练计划】——(三... 作者名:Demo不是emo  主页面链接:主页传送门 创作初心ÿ...