一,安装scss/sass:
1,安装插件:
liuhongdi@lhdpc:/data/vue/scssdemo$ vue add style-resources-loader 📦 Installing vue-cli-plugin-style-resources-loader... added 1 package in 5s 14 packages are looking for funding run `npm fund` for details ✔ Successfully installed plugin: vue-cli-plugin-style-resources-loader ? CSS Pre-processor? (Use arrow keys) ❯ SCSS SASS Stylus Less 在询问CSS Pre-processor处选择默认的SCSS并回车
2,为项目安装sass等第三方库支持:
liuhongdi@lhdpc:/data/vue/scssdemo$ npm install -D sass-loader@10.2.0 node-sass sass added 99 packages in 3m 14 packages are looking for funding run `npm fund` for details
说明:sass-loader如果不指定一个较低的版本,
默认安装高版本时会报冲突
sass-loader选择10这个版本是为了对webpack版本的兼容:
查看当前项目的webpack版本:
iuhongdi@lhdpc:/data/vue/scssdemo$ npm list webpack scssdemo@0.1.0 /data/vue/scssdemo ├─┬ @vue/cli-plugin-babel@4.5.13 │ ├─┬ babel-loader@8.2.2 │ │ └── webpack@4.46.0 deduped │ ├─┬ cache-loader@4.1.0 │ │ └── webpack@4.46.0 deduped │ ├─┬ thread-loader@2.1.3 │ │ └── webpack@4.46.0 deduped │ └── webpack@4.46.0 ...
3,安装完成后查看安装的第三方库:
liuhongdi@lhdpc:/data/vue/scssdemo$ npm list sass-loader scssdemo@0.1.0 /data/vue/scssdemo └── sass-loader@10.2.0 liuhongdi@lhdpc:/data/vue/scssdemo$ npm list sass scssdemo@0.1.0 /data/vue/scssdemo ├─┬ sass-loader@10.2.0 │ └── sass@1.42.1 deduped └── sass@1.42.1 liuhongdi@lhdpc:/data/vue/scssdemo$ npm list node-sass scssdemo@0.1.0 /data/vue/scssdemo ├── node-sass@6.0.1 └─┬ sass-loader@10.2.0 └── node-sass@6.0.1 deduped
查看package.json
"dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", "node-sass": "^6.0.1", "sass": "^1.42.1", "sass-loader": "^10.2.0" },
二,编写代码:
Home.vue
<template>
<div class="main" style="">
<div class="top">
<span @click="changeColor('red')" >红色</span>
<span @click="changeColor('yellow')" >黄色</span>
<span @click="changeColor('blue')" >蓝色</span>
<span @click="changeColor('green')" >绿色</span>
</div>
<div class="demo">
</div>
</div>
</template>
<script>
export default {
name: "Home",
setup() {
const changeColor = (color) => {
document.getElementsByTagName('body')[0].style.setProperty('--div_bg', color);
};
return {
changeColor,
}
},
}
</script>
<style lang="scss" scoped>
/*$bg: red;*/
$bg: var(--div_bg, #ff0000);
.main {
width:100vw;
height:100vh;
background: #eeeeee;
.top {
margin-top: 0px;
width:500px;
height:30px;
span {
margin-top: 10px;
float: left;
margin-left: 30px;
background: #2c3e50;
border-radius: 5px;
color: #ffffff;
width:50px;
height: 30px;
line-height: 30px;
}
}
.demo {
width:100px;
height:100px;
margin-top: 20px;
margin-left: 30px;
border-radius: 10px;
background-color: $bg;
}
}
</style>
说明:刘宏缔的架构森林—专注it技术的博客,
网址:https://imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/05/28/vue-js-3-2-20-an-zhuang-shi-yong-scss-sass-sassloader-10-2/
代码: https://github.com/liuhongdi/ 或 https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
三,测试效果
四,查看vue.js的版本
liuhongdi@lhdpc:/data/vue/scssdemo$ npm list vue scssdemo@0.1.0 /data/vue/scssdemo ├─┬ @vue/cli-plugin-babel@4.5.13 │ └─┬ @vue/babel-preset-app@4.5.13 │ └── vue@3.2.20 deduped └─┬ vue@3.2.20 └─┬ @vue/server-renderer@3.2.20 └── vue@3.2.20 deduped