继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Parcel 开启三大CSS预处理器--Stylus/Less/Sass

李夜
关注TA
已关注
手记 13
粉丝 50
获赞 1379

Parcel 默认支持 Stylus/Less/Sass, 只不过需要安装对应的npm依赖。官方文档言语模糊,我们这里便来实践一下具体如何开启tylus/Less/Sass。

支持 stylus
yarn add stylus --dev

如在 App.vue 同目录下新建style.styl 样式文件, 然后引入:

// template 和 script 内容略过
<style lang="stylus">
@import './style';
</style>

启动,会看到 Parcel 默认将样式文件内联到<head>标签中。

支持 less
yarn add less --dev

如在 App.vue 同目录下新建style.less 样式文件, 然后引入:

// template 和 script 内容略过
<style lang="less">
@import './style';
</style>
支持 sass
yarn add node-sass --dev

如在 App.vue 同目录下新建style.scss 样式文件, 然后引入:

// template 和 script 内容略过
<style lang="scss">
@import './style';
</style>

注意:上述如果启动失败,可以重装 babel-preset-env 依赖。

问题

实践过程中发现一个问题: 在vue 组件 <style> 中,通过 @import引入样式文件后,修改样式文件 HMR 失效。 这是个让人很受伤的问题。该问题是parcel-plugin-vue(查看issue18) 导致的,目前还未解决。

我们这里可以先在vue 组件的 <script>中将样式 import 进来, HMR有效。

打开App,阅读手记
4人推荐
发表评论
随时随地看视频慕课网APP