style 任务
任务类型为 style
。
style
任务用于处理 CSS 资源,主要包含 CSS 预处理、兼容性处理、压缩等功能。
任务流程
- 环境变量替换 - 静态替换
env
对应的字符串 - 别名替换 - 静态替换
alias
对应的字符串 - CSS 预处理器编译
- 自定义插件处理
- postcss 处理 - 包含 属性兼容性前缀(autoprefixer)、压缩混淆(cssnano)等
- 生成 source map 文件
- 生成文件hash - 支持
[name]-[hash]
和[name]?[hash]
两种方式。
文件入口
文件入口配置支持 单一字符串,数组,和对象 3 种方式。
js
// 1. 字符串
{
input: './src/styles/**/*.{css,scss}'
}
// 2. 数组方式
{
input: [
'./src/styles/comm.css',
'./src/styles/index.css',
'./src/styles/page.css',
]
}
// 3. 对象方式
{
input: {
'comm/index': [
'./src/styles/base.css',
'./src/styles/utils.css',
],
'index': './src/styles/index.css',
'pages': './src/styles/pages/*.css'
}
}
// 1. 字符串
{
input: './src/styles/**/*.{css,scss}'
}
// 2. 数组方式
{
input: [
'./src/styles/comm.css',
'./src/styles/index.css',
'./src/styles/page.css',
]
}
// 3. 对象方式
{
input: {
'comm/index': [
'./src/styles/base.css',
'./src/styles/utils.css',
],
'index': './src/styles/index.css',
'pages': './src/styles/pages/*.css'
}
}
CSS 预处理器
pipflow 支持 sass (scss)
, less
, stylus
三种最常见的 CSS 预处理器。你只需在 style
类型任务的 compiler
属性中配置对应的预处理器即可。
为了编码方便,你还可以在转译时注入额外代码。
下面我们以 scss
为例进行简单配置:
js
// pipflow.config.js
module.exports = {
tasks: [
// ... 其他任务
{
type: 'style',
input: './src/styles/**/*.scss',
compiler: 'sass',
compilerOptions: {
// 注入额外代码
additionalData: `@import './comm/variables';\n$--primary-color: blue;`,
// sass 选项
preprocessorOptions: {
includePaths: ['node_modules'], //支持加载npm包
}
}
}
]
}
// pipflow.config.js
module.exports = {
tasks: [
// ... 其他任务
{
type: 'style',
input: './src/styles/**/*.scss',
compiler: 'sass',
compilerOptions: {
// 注入额外代码
additionalData: `@import './comm/variables';\n$--primary-color: blue;`,
// sass 选项
preprocessorOptions: {
includePaths: ['node_modules'], //支持加载npm包
}
}
}
]
}
additionalData 选项
所有预处理器都支持 additionalData
选项,可以用于为每个样式内容注入额外代码。请注意,如果注入的是实际的样式而不仅仅是变量时,那么这些样式将会在最终的打包产物中重复出现。
各预处理器使用详见:
PostCSS 插件
PostCSS 内置了众多插件用来转换 CSS, 你只需在项目根目录的 postcss.config.js
文件中配置即可。目前 pipflow
已内置浏览器兼容性前缀(postcss-preset-env
)和压缩优化(cssnano
)插件。
这里列出一些常用的插件和用法示例,更多插件请参见 这里
pxtorem
将 px
单位转换为 rem
单位。 更多配置请参见 这里
js
// postcss.config.js
module.exports = {
plugins: [
require('postcss-pxtorem')({
rootValue: 16,
propList: ['*'],
minPixelValue: 12,
exclude: /node_modules/i,
})
]
}
// postcss.config.js
module.exports = {
plugins: [
require('postcss-pxtorem')({
rootValue: 16,
propList: ['*'],
minPixelValue: 12,
exclude: /node_modules/i,
})
]
}
pxtoview
将CSS中的 px
单位转换为 vw、vh
等视口单位。 更多配置请参见 这里
js
// postcss.config.js
module.exports = {
plugins: [
require('postcss-px-to-viewport')({
viewportWidth: 375,
unitPrecision: 5,
viewportUnit: 'vw',
propList: ['*'],
selectorBlackList: ["ignore"],
minPixelValue: 1,
mediaQuery: false
})
]
}
// postcss.config.js
module.exports = {
plugins: [
require('postcss-px-to-viewport')({
viewportWidth: 375,
unitPrecision: 5,
viewportUnit: 'vw',
propList: ['*'],
selectorBlackList: ["ignore"],
minPixelValue: 1,
mediaQuery: false
})
]
}
with Tailwind CSS
项目中集成 Tailwind CSS
。 具体配置请参见 这里
- 通过
npm
安装tailwindcss
及其依赖项,并创建tailwind.config.js
文件。
bash
npm install -D tailwindcss autoprefixer
npx tailwindcss init
npm install -D tailwindcss autoprefixer
npx tailwindcss init
- 配置
tailwind.config.js
js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
- 配置
postcss.config.js
js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
],
}
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
],
}