VuePack 的 CSS 工具链完全指南：PostCSS、SASS、CSS Modules 与 CSS 框架一次搞定

【免费下载链接】vuepack:package: A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)项目地址: https://gitcode.com/gh_mirrors/vu/vuepack

VuePack 是一款现代 Vue 2 项目脚手架，内置 Webpack 2 构建体系，开箱即用地支持 PostCSS 自动补全、SASS/LESS 预处理器、CSS Modules 局部作用域样式，以及 Bootstrap、Bulma、Element-UI 等主流 CSS 框架。本文为你梳理 VuePack CSS 工具链的完整用法，让你一次搞懂所有样式方案。

为什么 VuePack 的 CSS 体验如此顺滑？

VuePack 基于 Webpack 2 和 vue-loader 11 构建，样式能力在生成项目时就已经配置好了：

• ✅PostCSS 默认启用：autoprefixer自动补全浏览器前缀，postcss-nested支持嵌套语法
• ✅CSS 预处理器零配置引入：装好 loader 即可在.vue组件里写 SCSS/LESS
• ✅CSS Modules 可选开启：JSX 组件默认启用，局部样式不再打架
• ✅CSS 框架灵活接入：JS 引入或组件内src引入，两条路任选

你可以在 template/package.json 中看到默认依赖的css-loader、style-loader、postcss-loader、autoprefixer、postcss-nested，全部已就绪。

PostCSS 快速上手：零配置自动补全

VuePack 在 template/package.json 的postcss字段中默认注册了两个插件：

• autoprefixer：根据你的browserslist配置自动添加-webkit-、-moz-等前缀
• postcss-nested：支持类似 SASS 的嵌套写法，日常写普通 CSS 时也更方便

默认的浏览器兼容范围为["last 2 versions", "ie > 8"]，同样写在package.json的browserslist字段中。

想扩展 PostCSS 插件？只需修改package.json里的postcss字段，添加对应插件即可，无需触碰 Webpack 配置。详见 docs/postcss.md。

SASS / LESS 最快配置方法：两步搞定

想在单文件组件的<style>区块里写 SCSS？只需两步：

第一步：安装 loader

npm install -D sass-loader node-sass

第二步：给 style 标签加上lang属性

<style lang="scss"> $color: red; body { color: $color; } </style>

就这样——无需任何 Webpack 配置改动。LESS 用户同理，安装less-loader后使用lang="less"。完整文档见 docs/sass-and-others.md。

CSS Modules 教程：让样式真正属于组件

CSS Modules 能解决大型 Vue 项目中样式冲突的顽疾。每个类的类名会在构建时被生成唯一哈希，保证互不干扰。

在 .vue 组件中使用

只需给<style>加上module属性：

<style module> .foo { color: blue; } </style> <template> <div :class="$style.foo">foo</div> </template>

在 JSX 组件中使用

VuePack 模板本身就演示了 CSS Modules 的用法。查看 template/client/components/Counter/index.js：

import style from './style.css' // 使用类名 <div class={style.counter}>

对应的样式写在 template/client/components/Counter/style.css，里面的.counter就是被模块化的类。而全局样式则用:global包裹，见 template/client/components/App/style.css。

💡 提示：非 Vue 组件默认关闭 CSS Modules，选择启用 JSX 组件时会自动开启。你也可以在./build/config.js中通过cssModules字段随时切换开关。详细说明见 docs/css-modules.md。

接入 CSS 框架：Bootstrap、Bulma、Element-UI

引入第三方 CSS 框架有两条路，推荐程度见下：

方式一：在 JS 文件中引入

import '/path/to/file.css'

适用于全局框架（如 Bootstrap 的 dist 文件）。若加载的是.scss，记得先安装对应 loader。

方式二：在单文件组件中引入（推荐）

不需要改 Webpack 配置，只需安装相关 loader：

<style src="/path/to/file.css"></style>

配合 SASS 还能修改框架变量，例如定制 Bulma 主题色：

<style lang="sass"> $blue: #72d0eb; $pink: #ffb3b3; @import "~bulma"; </style>

完整示例见 docs/using-css-frameworks.md。

常见问题速查清单

总结：一条完整的 Vue 样式工作流

VuePack 的 CSS 工具链设计哲学是「默认够用，按需扩展」：

1. 默认层：PostCSS + autoprefixer 保证兼容性，什么都不用装
2. 进阶层：SASS/LESS 预处理器两步接入
3. 工程化层：CSS Modules 隔离作用域，避免样式冲突
4. 生态层：任意 CSS 框架自由接入

配合 Vue 2、Vuex、Vue-router 与 Webpack 2，VuePack 为你提供了一条从样式到打包的完整现代前端工作流。

【免费下载链接】vuepack:package: A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)项目地址: https://gitcode.com/gh_mirrors/vu/vuepack