前端学习笔记-8.6css预处理器Stylus问题报错注意事项 在vue-cli项目中

要用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

猜你喜欢

转载自blog.csdn.net/qq_43000359/article/details/82938891
今日推荐