vue node-sass,vue 使用sass

　　本文主要介绍了vue3.0中sass的整体使用过程，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　 vue3.0 sass全球使用vue3.0 sass入门。用npm 2安装sass包。创建新的scss文件3。将style.scss文件引入main.js 4。将样式引入页面元素。

vue3.0 sass全局的使用

　　需要一个插件：sass-resources-loader。

　　NPM I sass-资源-加载程序-保存-开发

　　建立一个scss文件common.scss

　　$ input-color:# 888；

　　在vue.config.js(官网灰机)配置

　　//css预设配置项

　　loaderOptions: {

　　//将选项传递给sass-loader

　　scss: {

　　//sass-loader V8或更高版本

　　prepend data: @ import ~ @/assets/common . scss ；

　　//sass-loader版本V8以下

　　//additional data: @ import ~ @/assets/common . scss ；

　　}

　　}

　　直接在组件中使用。

　　输入{

　　颜色：$ input-color；

　　}

　　Sass安装说明：节点的版本与node-sass的依赖版本不一致。sass-loader11需要webpack5，webpack版本控制是安装vue cli的版本，vue cli5是webpack5。

　　最后一步，记得重启项目！

vue3.0使用sass入门

　　实现在vue中使用sass风格的四个步骤

1.使用npm安装sass包

　　使用npm安装node-sass，sass-loader，安装使用- save-dev，可以在开发环境中使用。具体版本如下：

　　节点-萨斯:^4.14.1，

　　“萨斯-装载机”:^9.0.3

2.新建scss文件

　　Scss代码片段如下：

　　_变量. scss

　　//颜色

　　$colors:(

　　主:#00E5FF，

　　紫色:#9e6fef，

　　浅紫色:#BFBDFF，

　　黄色:#FFF701

　　);

　　$ base-font-size:1 rem；

　　$ font-size:(

　　xxs: 0.5714，//8px

　　xs: 0.7143，//10px

　　sm: 0.8571，//12px

　　md: 1，//14px

　　lg: 1.1429，//16px

　　xl: 1.4286 //20px

　　);

　　style.scss

　　@import 。/variables ；

　　//颜色

　　@each $colorKey，$color in $colors {。text-#{$colorKey} {

　　颜色：$ color

　　}

　　}

　　//字体大小

　　@each $sizeKey，$ size in $ font-size {。fs-#{$sizeKey} {

　　font-size:$ size * $ base-font-size；

　　}

　　}

3.在main.js中引入style.scss文件

　　因为main.js文件中引入的样式可以全局使用，所以引入语句如下：

　　“导入”。/assets/scss/style.scss

4.在页面元素中引入样式即可

　　例如：

　　H3大五人格测验/h3

　　实现如图所示：

　　以上，简单的sass样式介绍完毕后，可以提取常用的样式，打包自己的scss文件。

　　以上只是个人经验，希望给大家一个参考，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。