1

最近在使用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的什么配置吗?

ma63d 437
2016-07-08 提问

查看全部 7 个回答

1

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

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

推荐答案

3

已采纳

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

推广链接