vue2项目使用scss
时间: 2023-08-30 21:10:33 浏览: 43
要在 Vue2 项目中使用 SCSS,需要安装 `sass-loader` 和 `node-sass` 两个依赖。
1. 安装依赖
```
npm install sass-loader node-sass --save-dev
```
2. 配置 webpack
在 `webpack.base.conf.js` 中添加以下代码:
```javascript
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
}
}
```
3. 创建 SCSS 文件
在 Vue 组件的 `<style>` 标签中,将 `lang` 属性设置为 `scss`,并创建 SCSS 文件。
```html
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<style lang="scss">
$primary-color: #007bff;
h1 {
color: $primary-color;
}
</style>
<script>
export default {
data() {
return {
message: 'Hello, world!'
}
}
}
</script>
```
以上就是在 Vue2 项目中使用 SCSS 的步骤。