配置postcss.config.js不生效

[wuyiifan]

提问前请确认以下几点信息，否则你的问题将不会被解答

• 参考 https://zhuanlan.zhihu.com/p/25795393 学会正确的提问方式
• 确定已经阅读过文档 http://doc.ssr-fc.com/ 并且文档中搜索不到相关答案
• 对应服务端框架的使用问题请去它们的官方文档找答案。例如 Midway, Nest.js
• 如果你确认当前是一个 bug 请给最简复现仓库。只有一张图或者信息不足的问题将会被直接关闭
• 原则上这里只解答与本框架有关的问题。关于其他问题例如 Node.js 怎么连 Mysql 怎么获取 cookie 这种基础问题你应该去 google找答案而不是在这里。

详细描述你的问题

在项目根更目录新建postcss.config.js

这是webpack文档地址

const pxtoviewport = require('postcss-px-to-viewport')

module.exports = (api) => {
  // `api.file` - path to the file
  // `api.mode` - `mode` value of webpack, please read https://webpack.js.org/configuration/mode/
  // `api.webpackLoaderContext` - loader context for complex use cases
  // `api.env` - alias `api.mode` for compatibility with `postcss-cli`
  // `api.options` - the `postcssOptions` options

  // if (/\.sss$/.test(api.file)) {
  //   return {
  //     // You can specify any options from https://postcss.org/api/#processoptions here
  //     parser: 'sugarss',
  //     plugins: [
  //       // Plugins for PostCSS
  //       ['postcss-short', { prefix: 'x' }],
  //       'postcss-preset-env'
  //     ]
  //   }
  // }

  return {
    plugins: [
      pxtoviewport({
        viewportWidth: 1440,
        include: [/\src\/components\/landing-page/]
      })
    ]
  }

  // return {
  //   // You can specify any options from https://postcss.org/api/#processoptions here
  //   plugins: [
  //     // Plugins for PostCSS
  //     ['postcss-short', { prefix: 'x' }],
  //     'postcss-preset-env'
  //   ]
  // }
}

期望的结果

postcss-px-to-viewport 能正常工作

当前使用的版本

"@ant-design/icons": "^4.6.3",
    "@mailchimp/mailchimp_marketing": "^3.0.58",
    "@midwayjs/cache": "^2.12.7",
    "@midwayjs/decorator": "^2.12.3",
    "@midwayjs/swagger": "^1.0.7",
    "@midwayjs/web": "^2.12.7",
    "@paypal/react-paypal-js": "^7.2.1",
    "@types/cache-manager": "^3.4.2",
    "antd": "^4.16.12",
    "antd-mobile": "^2.3.4",
    "axios": "^0.21.1",
    "cache-manager": "^3.4.4",
    "classnames": "^2.3.1",
    "egg": "^2.30.0",
    "egg-mysql": "^3.0.0",
    "egg-scripts": "^2.14.0",
    "geoip-lite": "^1.4.2",
    "mysql": "^2.18.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-intl": "^5.20.10",
    "react-router-dom": "^5.2.0",
    "ssr-core-react": "^5.6.5",
    "ssr-types-react": "^5.6.4",

复现仓库地址

你本人对问题可能的原因判断(如果你能大概判断的话)

[zhangyuang]

为什么要include src呢组件都不在src下面。打个console就知道这个文件有没有被读取啊。如果被读取没生效那很明显就是你写的有问题啊

[wuyiifan]

plugins: [
      pxtoviewport({
        viewportWidth: 1440
      })
    ]

改成这样也不行

[wuyiifan]

按照官网的配置去写的

[zhangyuang]

你自己看这个文件有没有被读取就知道了啊有点最基本的debug技能

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: wuyiifan @.> 发送时间: 2021年9月3日 14:17 收件人: ykfe/ssr @.> 抄送: yuuang @.>, Comment @.> 主题: 回复：[ykfe/ssr] 配置postcss.config.js不生效 (#109)

按照官网的配置去写的

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[wuyiifan]

这个不是debug的能力，是框架是否支持在外部引用postcss.config.js

[zhangyuang]

跟框架有什么关系啊。postcssloader会读就读啊不会就不读啊打个console就知道有没有读啊怎么听不懂我说的话呢

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: wuyiifan @.> 发送时间: 2021年9月3日 14:38 收件人: ykfe/ssr @.> 抄送: yuuang @.>, Comment @.> 主题: 回复：[ykfe/ssr] 配置postcss.config.js不生效 (#109)

这个不是debug的能力，是框架是否支持在外部引用postcss.config.js

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[wuyiifan]

没有读取这个配置文件啊

[zhangyuang]

and 你可以直接用config.css选项配置postcss plugin不需要创建额外文件

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: wuyiifan @.> 发送时间: 2021年9月3日 14:38 收件人: ykfe/ssr @.> 抄送: yuuang @.>, Comment @.> 主题: 回复：[ykfe/ssr] 配置postcss.config.js不生效 (#109)

这个不是debug的能力，是框架是否支持在外部引用postcss.config.js

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[wuyiifan]

那不就是不支持创建额外的配置文件。

postcssOptions: (loaderContext) => {
            if (/\.sss$/.test(loaderContext.resourcePath)) {
              return {
                parser: "sugarss",
                plugins: [
                  ["postcss-short", { prefix: "x" }],
                  "postcss-preset-env",
                ],
              };
            }

            return {
              plugins: [
                ["postcss-short", { prefix: "x" }],
                "postcss-preset-env",
              ],
            };
          },

想要拿到loaderContext这个不支持么

[zhangyuang]

这个功能在 postcss>=v4 才支持，刚升级了一下依赖需要重装最新依赖，不建议用 function 模式，这样会覆盖默认的postcss配置。 如果非要用，按照下列写法。同样支持 postcss.config.js

module.exports = {
  css: () => {
    return {
      loaderOptions: {
        postcss: {
          options: (loaderContext) => {
            console.log(loaderContext.resourcePath)
            return {}
          }
        }
      }
    }
  }
}

// postcss.config.js
module.exports = (api) => {
  // `api.file` - path to the file
  // `api.mode` - `mode` value of webpack, please read https://webpack.js.org/configuration/mode/
  // `api.webpackLoaderContext` - loader context for complex use cases
  // `api.env` - alias `api.mode` for compatibility with `postcss-cli`
  // `api.options` - the `postcssOptions` options
  if (/\.sss$/.test(api.file)) {
    return {
      // You can specify any options from https://postcss.org/api/#processoptions here
      parser: 'sugarss',
      plugins: [
        // Plugins for PostCSS
        ['postcss-short', { prefix: 'x' }],
        'postcss-preset-env'
      ]
    }
  }

  return {
    // You can specify any options from https://postcss.org/api/#processoptions here
    plugins: [
      // Plugins for PostCSS
      ['postcss-short', { prefix: 'x' }],
      'postcss-preset-env'
    ]
  }
}

[wuyiifan]

感谢，我去搞一下。

[wuyiifan]

非常完美，是我想要的。