vue-cli 引入 stylus 失败

Question

最近在使用vue-cli创建项目时发现无法在js文件中引入stylus文件,以前自己写的代码就没有问题,死活找不到原因,所以来问问各个大神.
操作步骤很简单:
先通过vue-cli的webpack模板建立文件夹:

vue init webpack test-stylus

然后安装依赖

npm install

再然后 安装stylus stylus-loader style-loader

npm install stylus stylus-loader style-loader --save-dev

然后改了一下webpack的配置
在webpack.base.conf.js的module的loaders里加入了

{ 
  test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' 
}

在resolve的extensions里加入了.styl

extensions: ['', '.js', '.vue','.styl']

接下来就随便写了个index.styl文件,内容就一行(实验嘛)

body
    margin 0

然后在main.js里引入

import './stylus/index.styl'

接下来

npm run dev 

报错了.....

求各位大神看看这是为什么啊

还需要修改webpack的什么配置吗?

Answer 1

好像根本就不需要配置.styl的loader，我记得我用less就是lang声明好，loader下载好就行了。

Answer 2

正确安装stylus
npm install stylus stylus-loader --save-dev

如果stylus语法在.vue的单文件中无法解析，命令行报错，说

Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.

解决办法：
1、 修改webpack.config.js中的plugin位置

{
    test: /\.styl(us)?$/,
    use: [
        "style-loader",
        "css-loader", 
        "stylus-loader"
    ]
},

注意，test这个位置的写法比较关键
然后你的.vue单文件中的样式写法 lang="stylus" 或者 lang="styl"都可以

<style lang="stylus" scoped>

// stylus样式

</style>

第二种： 其实就是你在webpack.cconfig.js中的plugins中配置的stylus的test是

test: /\.styl$/

那么就把.vue的单文件中的 style的lang="styl" 就可以，不要设置为stylus

我也只踩过坑才知道，小主，你不点点关注 啊哈哈！！！

Answer 3

<style lang="stylus"></style>

样式写在写里面

Answer 4

按照图片修改webpack.base.conf.js 就可以了。

Answer 5

只需要再npm install stylus --save-dev npm install stylus-loader --save-dev 其他什么都不用管
对还需要在 style标签中 用 lang='stylus' 进行声明

Answer 6

在解决呀楼主，被这个问题困扰，我直接在。vue的styls写是可以的，但是在main引进就不行

Answer 7

不需要配置样式表loader,webpack.config.js里已经配置好了各种样式loader（如css-loader style-loader stylus-loader等），可以参考http://www.cnblogs.com/aoping...