要用stylus,出现了问题,被坑了。
什么是css预处理器?
推荐:三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
1.安装(windows7.64位)
全局输入以下命令:
npm install stylus -g
项目中安装:
npm install stylus
2.让编辑器支持stylus(我用的atom)
在Atom的Package中搜索stylus,选款安装即可
推荐使用WebStorm,虽然大,不需要单独安装插件,新建Stylus文件是,只需要New->stylesheet->stylus即可(未实测)
3.在项目中,你需要再安装2个依赖
npm install stylus --save-dev
npm install stylus-loader --save-dev
npm run dev(就可以跑了)
实际使用中,总会遇到问题
1.引入文件:
import './assets/base.styl’
需要细心,我少打了个/,
import ‘.assets/base.styl’,报错
Failed to compile.
./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
Module not found: Error: Can’t resolve ‘.assets/base.styl’ in ‘F:\App\ten\src’
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 21:0-27
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
[email protected] requires a peer of ajv@^6.0.0 but none is installed.
You must install peer dependencies yourself
[email protected]需要ajv@^6.0.0的对等体,但没有安装。
您必须自己安装对等依赖项
在项目中,输入以下命令安装:
npm install ajv@^6.0.0
3.optional SKIPPING OPTIONAL DEPENDENCY:[email protected] <node_modules\fsevents>:
Unsupported platform for [email protected]:wanted {“os”:“darwin”,“arch”:“any”}
{current:{“os”:“win32”,“arch”:“x64”}}
event是mac osx系统的,如果在win或者Linux下使用了,会有警告,忽略即可。
推荐小白:
https://www.cnblogs.com/cpqwebfe/p/7048612.html
vue中如何引入公共样式的的styl文件
https://blog.csdn.net/qq_14988399/article/details/80678267