• 欢迎关注我的微信公众号“ frontEnd_Developer ” 右边扫描关注 --->>

基于webpack的Vue项目中使用css的Sass语法及初始配置

Front-end 神棍 846℃

项目是基于vue-cli的webpack模版搭建的。

1、安装

1.1安装vue项目

$ vue init webpack vue-test

1.2、在当前目录下,安装依赖

$ cd vue-test
$ npm install

1.3、安装sass的依赖包

// sass-loader是依赖于node-sass 所以安装两个包
$ npm install --save-dev sass-loader  node-sass

2、使用

2.1在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

如下图所示:

2.2、在APP.vue中修改style标签

<style lang="scss">
<!--在这里,你可以使用骚气的sass语法来编辑你的css了-->
</style>

3、运行项目

$ npm run dev

整理来自项目使用

转载请注明:Falost的小窝 » 基于webpack的Vue项目中使用css的Sass语法及初始配置

如果你觉得这篇文章不错或者对你有帮助,想请我喝一杯咖啡,可以打赏
喜欢 (6)