postcss-prefix-selector 增加统一作用域

作者:Long Mo

字数统计:318 字

阅读时长:1 分钟

https://blog.csdn.net/tiven_/article/details/135929218?spm=1001.2014.3001.5502

安装

npm install postcss postcss-prefix-selector -D

配置 PostCSS

使用使用以下两种方式之一配置 PostCSS：

在项目根目录下创建 postcss.config.js 文件，配置 PostCSS 插件：

// postcss.config.js

module.exports = {
	plugins: [
		// require('postcss-pxtorem')({
		//   rootValue: 37.5, //1rem的大小
		//   propList: ['*'], //需要转换的属性
		//   selectorBlackList: ['.norem', '.vc-*'], //过滤掉不需要转换的类名
		//   exclude: /node_modules/i, //过滤掉node_modules文件夹下的文件
		// }),
		require('postcss-prefix-selector')({
			prefix: '.my-app',
			transform(prefix, selector, prefixedSelector) {
				// 这里可以排除一些特定的选择器
				if (selector === 'body' || selector === 'html') {
					return selector
				}
				return prefixedSelector
			},
			// exclude: ['.global'], // 排除全局样式的前缀添加
		}),
		// 其他 PostCSS 插件...
	],
}

在 vite.config.js 中配置 PostCSS 插件：

// vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import postCssPrefixSelector from 'postcss-prefix-selector';

export default defineConfig({
	plugins: [
		vue(),
	],
	css: {
		postcss: {
			plugins: [
				// postCssPxToRem({
				//   rootValue: 37.5, //1rem的大小
				//   propList: ['*'], //需要转换的属性
				//   selectorBlackList: ['.norem', '.vc-*'], //过滤掉不需要转换的类名
				//   exclude: /node_modules/i, //过滤掉node_modules文件夹下的文件
				// }),
				postCssPrefixSelector({
					prefix: '.my-app', // 添加的前缀
					transform(prefix, selector, prefixedSelector) {
						// 这里可以排除一些特定的选择器
						if (selector === 'body' || selector === 'html') {
							return selector
						}
						return prefixedSelector
					},
					// exclude: ['.global'], // 排除全局样式的前缀添加
				}),
			],
		},
	},
})

Contributors

Long Mo

文章作者：Long Mo

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Longmo Docs ！