Vue2 添加对scss的支持

在Vue 2项目中集成SCSS支持是一种增强项目表现力和可维护性的好方法。今天，我们将跟随长沙网络推广的脚步，深入了解如何为Vue 2项目添加SCSS支持，并为大家提供详细的步骤和参考。

为了使用SCSS，我们需要安装一些必要的node包。这些包包括node-sass、sass-loader、style-loader等。通过cnpm（一种轻量级的npm客户端）来安装这些包是非常方便的。安装命令如下：

```bash

cnpm install node-sass --save-dev

cnpm install sass-loader --save-dev

cnpm install style-loader --save-dev

```

安装完成后，我们需要在webpack的配置文件（webpack.config.js）中进行相应的配置，以便在.vue和.scss文件中使用这些加载器。以下是一个基本的配置示例：

```javascript

const webpack = require('webpack');

module.exports = {

entry: ['./src/entry.js'],

output: {

path: __dirname,

filename: 'build/main.js'

},

resolve: {

alias: {

'vue': 'vue/dist/vue.js'

}

},

module: {

rules: [ // 注意这里使用了"rules"而不是"loaders"

{

test: /\.vue$/,

loader: 'vue-loader',

options: {

// 这里配置SCSS的加载器顺序

scss: 'style-loader!css-loader!sass-loader' // 注意这里的感叹号表示串联多个加载器

}

},

// 其他配置...

{

test: /\.scss$/, // 这里匹配到.scss文件并应用对应的加载器进行编译处理

use: [ // 注意这里使用了"use"而不是"loader"来指定加载器列表，这是webpack的新语法习惯（对于旧版本，可能需要使用数组格式）