vue-cli 引入 stylus 失败

最近在使用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 

报错了.....

clipboard.png

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

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

阅读 16.8k
评论 2016-07-08 提问
    7 个回答
    LuoRiWuSheng
    • 3
    • 新人请关照

    正确安装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

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

    评论 赞赏 2019-02-14