site infoHacknerd | Tech Blog
blog cover

🧩 [Webpack实战: 入门、进阶与调优] 5. 样式处理

JavaScriptWebpack

分离样式文件

css-loader 和 style-loader 可以实现标签加载css样式，但如果想将css单独输出文件则需要插件

  • 1.extract-text-webpack-plugin
  • 2.多样式文件处理
  • 3.mini-css-extract-plugin

    • 样式预处理

  • 1.less
  • 2.sass

    • PostCss

    一个编译插件容器，与不同插件结合可以发挥不同功能

    javascriptCopy
    {
	module: {
		rules: {
			test: /\.css/,
			use: [
				'style-loader',
				'css-loader',
				'postcss-loader'
			]
		}
	},
}

  • Autoprefix。自动前缀。
  • stylelint 。css质量检查工具。
    • javascriptCopy
    const stylelint = require('stylelint')

module.exports = {
	plugins: [
		stylelint({
			config: {
				rules: {...}
			}
		})
	]
}

  • CSSNext。可以使开发在应用中使用最新css特性。
    • javascriptCopy
    const postcssCssnext = require('postcss-cssnext')

module.exports = {
	plugins: [
		postcssCssnext({
			browsers: ['> 1%', 'last 2 versions']
		})
	]
}

    Css module

    css 模块化。每个CSS样式都有单独作用域，不会与外界发生命名冲突

    javascriptCopy
    {
	module: {
		rules: {
			test:/\.css/,
			use: [
			'style-loader',
				{
					loader:'css-loader',
					options: {
							modules:true,
							localIdentName:[name]_[local]_[hash:base64:5],
					}
				}
			]
		}
	},
}

    localIdentName 用于指明css代码如何进行编译。

    cssCopy
    /* style.css */
.title {
	...
}

    会被编译成 .style_title_XXXX

    Contents

    • 分离样式文件
    • 样式预处理
    • PostCss
    • Css module
    2024/05/29 09:38