vue3中安装使用scss步骤
时间: 2023-12-30 09:45:39 浏览: 39
安装使用 SCSS 的步骤如下:
1. 安装 node-sass 和 sass-loader
在项目的根目录下,执行以下命令:
```
npm install node-sass sass-loader --save-dev
```
2. 配置 webpack
在项目的`vue.config.js`文件中进行配置:
```javascript
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/assets/style/main.scss";`
}
}
}
}
```
这里的配置是将`@/assets/style/main.scss`文件引入到每个 SCSS 文件中,这样就可以在 SCSS 文件中使用这个文件中定义的变量、mixin 等。
3. 在组件中使用 SCSS
在 Vue 组件中,可以通过`<style>`标签引入 SCSS 文件:
```html
<template>
<div class="example">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Hello, World!'
}
}
}
</script>
<style lang="scss">
.example {
background-color: $bg-color;
h1 {
color: $title-color;
}
}
</style>
```
这里的`lang="scss"`表示这是一个 SCSS 文件,并且在其中可以使用 SCSS 的语法。同时,可以在 SCSS 文件中使用`$`符号定义变量、mixin 等,这些定义在`main.scss`中的变量、mixin 等也可以在这里使用。