目录 一、什么是SCSS二、SCSS与CSS的区别三、Vue中安装SCSS♻️安装SCSS♻️运行项目进行测试四、项目中使用SCSS补充:全局引用scss⛺SCSS常用命令
SCSS是成熟、稳定、强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容css3的同时继承了Sass强大的动态功能。
SCSS更加优秀!
建议在cmd窗口安装并使用管理员方式打开
使用阿里云服务器下载依赖,在国内下载会比npm外网下载依赖快一些
cnpm i -D node-sass sass-loader
//vue2.5.2需要降级安装
cnpm i -D node-sass@4.14.1 sass-loader@7.3.1
输入以下命令运行项目
npm run dev
运行成功~
在vue文件中指定样式语言为scss
vue代码
<template>
<div class="box-container1">
<el-button type="primary" @click="m1">普通</el-button>
<span class="span1">Yes</span>
</div>
</template>
到此完美使用SCSS~
先安装这个插件来进行全局引用scss
npm install sass-resources-loader --save-dev
然后修改build文件夹中的utils.js文件
将
scss: generateLoaders('sass'),
改为
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/index.scss')//这里改为自己的index.scss文件路径
}
}
)
项目里每个组件都可以直接用base.scss文件内的变量及样式了。记得style内加上lang=“scss”
<style scoped lang="scss">
SCSS官方文档
常用命令
到此这篇关于Vue2.x安装并使用SCSS的文章就介绍到这了,更多相关Vue2.x安装使用SCSS内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue2.x安装并使用SCSS的全部过程
本文链接: https://www.lsjlt.com/news/142512.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0