vue-cli 引入 stylus 遇到的坑

青青子衿
青青子衿
青青子衿
109
文章
7
评论
2017年8月7日20:46:27 评论

最近在使用vue-cli创建项目时发现无法在js文件中引入stylus文件,错误提示:

vue-cli 引入 stylus 遇到的坑

经过反复折腾,发现原来是配置出了问题,解决方案如下:

  1. 在package.json文件中增加如下代码:
    "stylus-loader": "^3.0.1",
    "stylus": "0.52.4"
  2. 然后再输入(mac系统别忘记输入 sudo ):
    $npm install
  3. 然后改了一下webpack的配置
    在webpack.base.conf.js的module的loaders里加入了

    { 
      test: /.styl$/, loader: 'style-loader!css-loader!stylus-loader' 
    }
    
  4. 在resolve的extensions里加入了.styl
    extensions: ['', '.js', '.vue','.styl']
  5. 然后在输入
    $npm run dev

    大功告成!

weinxin
我的微信
爱生活、爱学习的小伙伴可以通过扫一扫二维码添加我的个人微信一起交流!
青青子衿
  • 本文由 发表于 2017年8月7日20:46:27
  • 转载请务必保留本文链接:https://ishangsf.com/archives/664
vscode 一些基本知识 前端相关工具

vscode 一些基本知识

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、...
v-if与v-show的区别 Vue

v-if与v-show的区别

相同点:v-if与v-show都可以动态控制dom元素显示隐藏 不同点:v-if显示隐藏是将dom元素整个添加或删除,而v-show隐藏则是为该元素添加css--display:none,dom元素还...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: