预处理器

此样板预置了最流行 CSS 预处理器包括 LESS、SASS、Stylus 和 PostCSS。 要使用一个预处理器,你仅需要为其安装适当的加载器。例如,使用 SASS:

npm install sass-loader node-sass --save-dev

注意你也需要安装 node-sass ,因为它是 sass-loader 的一个依赖项。

组件内使用预处理器

一旦安装完,你就能在 *.vue 组件内使用预处理,通过设置 <style> 标签上的 lang 属性:

<style lang="scss">
/* 写 SASS! */
</style>

SASS 语法的一个注意项

  • lang="scss" 对应于 CSS 语法 (使用大括号和分号)。
  • lang="sass" 对应于基于缩进式的语法。

PostCSS

*.vue 文件内的样式默认通过 PostCSS 处理,所以你无需为它指定加载器。你只需简单地把 PostCSS 插件添加在 build/webpack.base.conf.js 文件中的 vue 块内:

// build/webpack.base.conf.js
module.exports = {
  // ...
  vue: {
    postcss: [/* your plugins */]
  }
}

查看 vue-loader 相关文档 获得更多细节。

单独 CSS 文件

为确保一致的处理,建议在根组件 App.vue 内导入一个全局的独立样式 CSS 文件,例如:

<!-- App.vue -->
<style src="./styles/global.less" lang="less"></style>

注意你只要加载你自己写的样式就行。对于现有的库,如 Bootstrap 或 Semantic UI,可以把它们放在 /static 目录下,并在 index.html 文件中直接引用它们就行。这样避免了额外的构建时间浪费,并且也更好地支持浏览器的缓存。(查看 静态资源处理 获得更多细节)

results matching ""

    No results matching ""