在vue中引入 node-sass

### 1、创建一个基于webpack模板的新项目

```js

vue init webpack demo

```

### 2、在当前目录下安装依赖

```js

$ cd demo

$ npm install

```

### 3、安装sass的依赖包

```js

npm install --save-dev sass-loader

// sass-loader依赖于node-sass

npm install --save-dev node-sass

```

```js

{

test: /\.sass$/,

loaders: ['style', 'css', 'sass']

}

```

如下面代码所示:

```js

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader',

options: vueLoaderConfig

},

{

test: /\.js$/,

loader: 'babel-loader',

include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

},

{

test: /\.sass$/,

loaders: ['style', 'css', 'sass']

},

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

},

{

test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('media/[name].[hash:7].[ext]')

}

},

{

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

}

}

]

}

```

### 5、在需要自定义样式的.vue文件中使用

```js

```

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180614G13U8000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券