查看: 2497|回复: 0

[JavaScript/JQuery] Parcel 开启三大CSS预处理器--Stylus/Less/Sass

发表于 2018-2-14 08:00:02

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

支持 stylus
  1. yarn add stylus --dev
复制代码

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

  1. // template 和 script 内容略过
  2. <style lang="stylus">
  3. @import './style';
  4. </style>
复制代码

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

支持 less
  1. yarn add less --dev
复制代码

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

  1. // template 和 script 内容略过
  2. <style lang="less">
  3. @import './style';
  4. </style>
复制代码
支持 sass
  1. yarn add node-sass --dev
复制代码

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

  1. // template 和 script 内容略过
  2. <style lang="scss">
  3. @import './style';
  4. </style>
复制代码

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

问题

实践过程中发现一个问题: 在vue 组件