卷起插图
安装
yarn add postcss rollup-plugin-postcss --dev
使用量
v2.0 支持卷起 v1 或以上,但它会打印出从卷起 v2 的已贬值的警告 .
打破变革数字 : v3.0 仅支持滚动 v2 和基于捆绑根的提取路径
在捆绑目录之外生成的文件的位置在滚动 v2 中不允许 .
// rollup.config.js
import postcss from 'rollup-plugin-postcss'
export default {
plugins: [
postcss({
plugins: []
})
]
}
然后您可以使用 CSS 文件 :
import './style.css'
注意生成的 CSS 将被注入到 <head> cSS 字符串也作为默认导出提供,除非 extract: true数字 :
// Inject to `<head>` and also available as `style`
import style from './style.css'
它还会自动使用本地 PostCSS 配置文件.
提取 CSS
// for v2
postcss({
extract: true,
// Or with custom file name, it will generate file relative to bundle.js in v3
extract: 'dist/my-custom-file-name.css'
})
// for v3
import path from 'path'
postcss({
extract: true,
// Or with custom file name
extract: path.resolve('dist/my-custom-file-name.css')
})
CSS 模块
postcss({
modules: true,
// Or with custom options for `postcss-modules`
modules: {}
})
与萨斯/斯蒂卢斯/莱斯
安装相应的依赖 :
- 对于
Sass安装node-sass数字 :yarn add node-sass --dev - 对于
Stylus安装stylus数字 :yarn add stylus --dev - 对于
Less安装less数字 :yarn add less --dev
就是这样 你现在可以进口了 .styl .scss .sass .less 在您的库中的文件.
进口
仅供萨斯/斯克斯使用.
类似于网络包装 自动装填器 工作,您可以预置路径 ~ 以告诉此插件 node_modules数字 :
@import "~bootstrap/dist/css/bootstrap";
选项
扩展
类型 : string[]
默认 : ['.css', '.sss', '.pcss']
此插件将处理以这些扩展名结尾的文件, 并由 自定义加载器。 。 。 .
插件
类型 : Array
PostCSS 插件 .
注入
类型 : boolean object function(cssVariableName, fileId): string
默认 : true
将 CSS 输入 <head>总是 false 何时 extract: true。 。 。 .
您也可以使用它作为选项 style-inject。 。 。 .
也可以是一个 function 返回 a string 这是js代码.
提取
类型 : boolean string
默认 : false
将 CSS 提取到生成 JS 文件的同一地点 .css 扩展名.
也可以设置为绝对路径.
模块
类型 : boolean object
默认 : false
启用 CSS 模块或设置选项 postcss-modules。 。 。 .
自动移动
类型 : boolean
默认 : true
自动启用 CSS 模块 .module.css .module.sss .module.scss .module.sass .module.styl .module.stylus .module.less 文档.
命名输出
类型 : boolean function
默认 : false
在默认导出的同时使用命名导出 .
您可以提供一种函数来控制导出命名的生成方式 :
namedExports(name) {
// Maybe you simply want to convert dash to underscore
return name.replace(/-/g, '_')
}
如果你定下来 true,在导入特定类名时将发生下列情况:
- 将所有破折号替换为
$标记所包裹的下划线,例如:.--=>$__$ - js 用作样式类名的保护名,将通过将名称包入到
$标志,如.switch=>$switch$
所有被转换的名字都会在终端上记录如下:
Exported "new" as "$new$" in test/fixtures/named-exports/style.css
原件不会被取出,仍然可以使用 default 导出 :
import style, { class$_$name, class$__$name, $switch$ } from './style.css'
console.log(style['class-name'] === class$_$name) // true
console.log(style['class--name'] === class$__$name) // true
console.log(style['switch'] === $switch$) // true
最小化
类型 : boolean object
默认 : false
尽量减少CSS, boolean 或选项 cssnano。 。 。 .
来源映射
类型 : boolean "inline"
启用源映射 .
解析器
类型 : string function
PostCSS 解析器, 如 sugarss。 。 。 .
字符串
类型 : string function
PostCSS 字符串键.
语法
类型 : string function
后CSS语法.
执行
类型 : boolean
启用 PostCSS 解析支持在 CSS-in-JS。 。 。 .
配置
类型 : boolean object
默认 : true
装入 PostCSS 配置文件 .
配置路径
类型 : string
配置文件的路径, 这样我们就可以跳过搜索 .
配置( c). ctx
类型 : object
ctx postCSS 配置文件的参数.
注意: 每把钥匙都通过 config.ctx 将在 options 内部
邮箱配置.
// rollup.config.js
postcss({
config: {
ctx: {
foo: 'bar'
}
}
})
// postcss.config.js
module.exports = context => {
console.log(context.options.foo) // 'bar'
return {}
}
改为
类型 : string
例如,PostCSS插件可以使用的目标 CSS 文件名提示, 正确解决路径、重新定位和复制资产.
使用情况
类型 : name[] [name, options][] { sass: options, stylus: options, less: options }
默认 : ['sass', 'stylus', 'less']
使用装入器,目前内置装入器为:
sass(支助).scss财务报告和审定财务报表.sass(中文(简体) )stylus(支助).styl财务报告和审定财务报表.stylus(中文(简体) )less(支助).less(中文(简体) )
他们从右到左被处决.
如果你通过 object,然后它的财产 sass, (中文(简体) ), stylus 财务报告和审定财务报表 less 将
在相应的装载器中通过.
装载器
类型 : Loader[]
一组自定义加载器,检查我们的 自动装填器 作为例子.
interface Loader {
name: string,
test: RegExp,
process: (this: Context, input: Payload) => Promise<Payload> | Payload
}
interface Context {
/** Loader options */
options: any
/** Sourcemap */
sourceMap: any
/** Resource path */
id: string
/** Files to watch */
dependencies: Set<string>
/** Emit a waring */
warn: PluginContext.warn
/** https://rollupjs.org/guide/en#plugin-context */
plugin: PluginContext
}
interface Payload {
/** File content */
code: string
/** Sourcemap */
map?: string | SourceMap
}
进口
类型 : id => void
检测到 CSS 文件导入时要引用的函数 .
许可证
麻省理工学院 电子化