基于vue-cli搭建一个多页面应用(二)--postcss插件和css预编译配置

这里以原项目模板的postcss插件autoprefixer为例说明:
基于vue-cli搭建一个多页面应用(二)--postcss插件和css预编译配置

1.为了便于测试,对首页做一些调整:
增加index.css

.postcss_test {
    transform: rotate(3deg);
}

修改如下图:
基于vue-cli搭建一个多页面应用(二)--postcss插件和css预编译配置

修改index.js
基于vue-cli搭建一个多页面应用(二)--postcss插件和css预编译配置

修改index.html

<div id="app">
    <app></app>
    <h1 class="postcss_test">postcss-autoprefixer</h1>
</div>

修改结果如下:
基于vue-cli搭建一个多页面应用(二)--postcss插件和css预编译配置

2.便于对比,对Hello.vue添加样式

<style scoped>
......
h1 {
  transform: rotate(3deg);
}
......
</style>

修改如下:
基于vue-cli搭建一个多页面应用(二)--postcss插件和css预编译配置

3.分别启动项目查看样式对比和打包后样式对比:
基于vue-cli搭建一个多页面应用(二)--postcss插件和css预编译配置

基于vue-cli搭建一个多页面应用(二)--postcss插件和css预编译配置

基于vue-cli搭建一个多页面应用(二)--postcss插件和css预编译配置

可以看出原模板的postcss插件只对组件起作用,不对页面起作用

4.安装postcss-loader并修改build/utils.js的配置

$ npm install  postcss-loader -D
function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader]
    if (loader) {
      ......
      loaders.splice((loaders.length - 1), 0, 'postcss-loader')
    }else {
      loaders.push('postcss-loader')
    }
    ......
  }

PS:2017.07.30补充
================= start ==================
以上配置时postcss-loader的版本为1.3.3
若postcss-loader的版本为2.0.0-2.0.2,以上配置会报错,

Module build failed: TypeError: Cannot create property 'prev' on boolean 'false'
at Promise.resolve.then.then
2.0.3及以上版本要报warning:

Previous source map found, but options.sourceMap isn't set.
In this case the loader will discard the source map enterily for performance reasons.
See https://github.com/postcss/po... for more information

2.0.3及以上版本需重新配置:

function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader]
    var postcssLoader = {
      loader:  'postcss-loader',
      options: {
        sourceMap: true
      }
    }
    if (loader) {
      ......
      loaders.splice((loaders.length - 1), 0, postcssLoader)
    }else {
      loaders.push(postcssLoader)
    }
    ......
  }

================= end ==================

2017.08.10补充
================= start ==================
关于flex在打包后没有diaplay: -webkit-flex;兼容性前缀
处理方案如下:

# package.json
"browserslist": [
    "last 5 versions"
  ]

================= end ==================

5.如果需要用到css的预编译,这里以sass为例,安装相应的插件即可:

$ npm install sass-loader node-sass -D

6.把index.css改为index.scss并用sass语法写样式,同时修改Hello.vue如下:
在style标签上添加:lang="scss"

<style scoped lang="scss">
......
.hello {
  h1 {
    transform: rotate(3deg);
  }
}
......
</style>

7.涉及到vue组件的设置,请参考文档:vue-loader,中文文档

2017.03.21补充:感谢Wall的提醒
上面关于style的lang属性,如果使用sass语法,也可以lang="sass"
在官方文档帮助手册里面说明了这个问题:

lang="scss" corresponds to the CSS-superset syntax (with curly braces and semicolones).
lang="sass" corresponds to the indentation-based syntax

关于sass和scss格式的区别,可参考官方文档

相关推荐