Parcel 開啟三大CSS預處理器--Stylus/Less/Sass
Parcel 默认支持 Stylus/Less/Sass, 只不过需要安装对应的npm依赖。官方文档言语模糊，我们这里便来实践一下具体如何开启tylus/Less/Sass。
支持 stylusyarn add stylus --dev如在 App.vue 同目录下新建style.styl 样式文件, 然后引入：
// template 和 script 内容略过
<style lang="stylus">
@import './style';
</style>启动，会看到 Parcel 默认将样式文件内联到<head>标签中。
yarn add less --dev如在 App.vue 同目录下新建style.less 样式文件, 然后引入：
// template 和 script 内容略过
<style lang="less">
@import './style';
</style>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有效。
點擊查看更多內容
4人點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦