vue2项目使用sass的示例代码

前端之家收集整理的这篇文章主要介绍了vue2项目使用sass的示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1,使用save会在package.json中自动添加

npm install sass-loader --save-dev

注:

通常使用npm安装会出现以下报错,安装失败。(网路问题)

可以通过淘宝的npm镜像安装node-sass,解决以上问题。

$ cnpm install node-sass --save (使用淘宝镜像安装node-sass)

2.进入webpack.base.config.js 配置scss module -- loaders (vue1.0)

css-loader
test: /.vue$/,loader: 'vue-loader',options: {

loaders: {

'scss': 'style-loader!css-loader!sass-loader'

}

}

}

打开webpack.base.config.js在loaders里面加上 module -- rules (vue2.0)

{

test: /.vue$/,options: vueLoaderConfig

},{

test: /.js$/,loader: 'babel-loader',include: [resolve('src'),resolve('test')]

},{

test: /.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',query: {

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

}

},{

test: /.scss$/,loaders: ["style","css","sass"]

},{

test: /.(woff2?|eot|ttf|otf)(\?.*)?$/,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

}

}

]

}

3.如果需要在vue文件style标签使用scss的话,需要声明一下:

vue1.0

vue2.0

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章