vue2项目使用scss,less
时间: 2024-05-16 11:13:10 浏览: 16
Vue2 项目可以使用 SCSS 或 LESS 预处理器来编写样式。以下是使用这两种预处理器的步骤:
使用 SCSS 预处理器:
1. 安装 sass 和 sass-loader:
```
npm install sass sass-loader --save-dev
```
2. 在 `vue.config.js` 中配置:
```
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/assets/scss/_variables.scss";`
}
}
}
}
```
3. 在组件的样式中使用 SCSS:
```
<style lang="scss">
// Your SCSS code here
</style>
```
使用 LESS 预处理器:
1. 安装 less 和 less-loader:
```
npm install less less-loader --save-dev
```
2. 在 `vue.config.js` 中配置:
```
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
// Your LESS variables here
},
javascriptEnabled: true
}
}
}
}
}
```
3. 在组件的样式中使用 LESS:
```
<style lang="less">
// Your LESS code here
</style>
```