如何在vue-cli生成的webpack模板中添加和使用scss?

前端小白,我想在vue-cli生成的webpack模板中使用bootstrap并用scss来编写样式。但是模板中的WebPack配置太多,我直接蒙逼了。而且scss-loader的README也仅仅给出了一点点WebPack配置,和vue生成的模板相比大相径庭。所以大神们能不能详细说说,应该添加什么包,然后编辑那个文件?

clipboard.png

我现在照着人家的README添加了scss-loader和node-sass,然后尝试在main.js中写入下面一行。

import './assets/css/site.scss'

scss文件是这么写的,然后不管是运行还是打包vue,果不其然的都失败了……

@import "~bootstrap/scss/bootstrap.scss";

.color-animate {
  animation: color-transition 10s ease 2s infinite;
}

@keyframes color-transition {
  0% {
    color: $red;
  }
  25% {
    color: $orange;
  }
  50% {
    color: $teal;
  }
  75% {
    color: $blue;
  }
  100% {
    color: $purple;
  }
}
阅读 3.1k
1 个回答

不用配置,vue-cli已经配置好了,安装sass-loader和node-sass就行了,然而国内下不了node-sass这个包,只能用淘宝镜像

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题