vue2 安裝scss
时间: 2023-06-28 21:12:04 浏览: 75
若要在Vue2项目中使用SCSS,需要先安装相关依赖。具体步骤如下:
1. 安装 `node-sass` 和 `sass-loader`,可以通过以下命令进行安装:
```
npm install node-sass sass-loader --save-dev
```
2. 修改 `webpack` 配置文件,在 `module.rules` 中添加 `sass` 和 `scss` 的处理规则,以便能够处理 `.scss` 和 `.sass` 文件。例如:
```javascript
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
}
}
```
3. 在组件中引入 `scss` 文件,例如:
```vue
<template>
<div class="my-component">
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data() {
return {
message: 'Hello World!'
}
}
}
</script>
<style lang="scss">
.my-component {
h1 {
color: red;
}
}
</style>
```
以上是在 Vue2 项目中安装并使用 SCSS 的基本步骤。