diff --git a/postcss.config.js b/postcss.config.js index b33e9a6..8253759 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,9 +1,31 @@ -// postcss.config.js +import postcss from 'postcss'; import pxToViewport from 'postcss-px-to-viewport'; +import { customPostCSSPlugin } from "./src/utils/custom-postcss-plugin.js"; // 替换为实际的路径 + +// 将 pxToViewport 应用到 navigation 文件夹下的文件 +const customPxToViewportPlugin = postcss.plugin('custom-px-to-viewport', (options) => { + const pxToViewportInstance = pxToViewport({ + viewportWidth: options.viewportWidth, + // ... 其他 pxToViewport 参数，如果需要的话 + }); + + return (root, result) => { + const file = result.opts.from; + // 确保路径中包含 navigation 文件夹 + if (file && file.includes('navigation')) { + pxToViewportInstance(root, result); + } + }; +}); + export default { plugins: [ - pxToViewport({ + customPostCSSPlugin({ + // ... 你的自定义插件选项 + }), + customPxToViewportPlugin({ viewportWidth: 1920, }), - ] + // ... 其他通用 PostCSS 插件 + ], }; diff --git a/src/utils/custom-postcss-plugin.js b/src/utils/custom-postcss-plugin.js new file mode 100644 index 0000000..155d52e --- /dev/null +++ b/src/utils/custom-postcss-plugin.js @@ -0,0 +1,16 @@ +// 使用 ES6 模块导入 +import postcss from 'postcss'; + +// 创建并导出插件 +export const customPostCSSPlugin = postcss.plugin('custom-postcss-plugin', (options) => { + return (root, result) => { + const file = result.opts.from; // 获取正在处理的文件的路径 + // 判断是否是目标文件 + if (file && file.includes(options.filename)) { + // 执行特定的 PostCSS 操作 + root.walkRules((rule) => { + rule.selectors = rule.selectors.map(selector => `.special-scope ${selector}`); + }); + } + }; +}); diff --git a/src/views/aboutpage.vue b/src/views/aboutpage.vue index 055570b..3367016 100644 --- a/src/views/aboutpage.vue +++ b/src/views/aboutpage.vue @@ -1,7 +1,7 @@