Builder 内置多种常用的样式资源处理方式,包括 Less / Sass 预处理器、PostCSS、CSS Modules、CSS 内联和 CSS 压缩。
除此之外,Builder 也提供了多个配置项来自定义样式资源的处理规则。
Builder 内置了社区流行的 CSS 预处理器,包括 Less 和 Sass。
默认情况下,你不需要对 Less 和 Sass 进行任何配置。如果你有自定义 loader 配置的需求,可以通过配置 tools.less、tools.sass 来进行设置。
你也可以在 Builder 中使用 Stylus,只需要安装 Builder 提供的 Stylus 插件即可,使用方式请参考 Stylus 插件。
Builder 内置了 PostCSS 来转换 CSS 代码。你可以通过 tools.postcss 来配置 postcss-loader。
Builder 内置了一些 PostCSS 插件,会对 CSS 进行以下转换:
initial
属性值 的兼容。break-
属性 的兼容。font-variant
的兼容。通常情况下,在生产环境我们会将 CSS、JS 等静态资源进行压缩,以达到更好的传输效率。
Builder 通过 css-minimizer-webpack-plugin 在生产环境构建时自动压缩 CSS 代码(底层使用的压缩工具为 cssnano)。
你可以通过 tools.minifyCss 配置项来修改 css-minimizer-webpack-plugin
的配置。
cssnano 是一个用于优化和压缩 CSS 文件的工具。它通过删除未使用的规则、合并相同的规则、移除注释和空白符以及转换长度单位等方式来减小 CSS 文件的体积,从而提升网站的加载速度。
默认情况下,Builder 会把 CSS 提取为独立的 .css
文件,并输出到构建产物目录。
如果你希望将样式内联到 JS 文件中,可以将 output.disableCssExtract 设置为 true
来禁用 CSS 提取逻辑。当浏览器请求到 JS 文件后,JS 将动态地向 HTML 插入 <style>
标签,以此加载 CSS 样式。
这将会增大你的 JS Bundle 体积,因此通常情况下,不太建议禁用 CSS 提取逻辑。
你可以直接引用 node_modules 里的样式文件。