px 转 vw, 配置postcss.config.js后运行项目报错

Z时代
2024-02-13
分类：IT

我使用postcss postcss-px-to-viewpor-opt 插件来将px转换为vw,通过以下postcss.config.js配置：

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    'postcss-aspect-ratio-mini': {},
    'postcss-write-svg': {
      utf8: false
    },
    'postcss-cssnext': {},
    'postcss-px-to-viewport-opt': {
      unitToConvert: 'px', // 要转化的单位
      viewportWidth: 750, // (Number) The width of the viewport.  视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 1334, // (Number) The height of the viewport.  视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 6, // (Number) The decimal numbers to allow the REM units to grow to.  指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // (String) Expected units. 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.  指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace. 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false, // (Boolean) Allow px to be converted in media queries. 允许在媒体查询中转换`px`
      exclude: /(\/|\\)(node_modules)(\/|\\)/, // 设置忽略文件，用正则做目录名匹配
    },
    'postcss-viewport-units': {},
    cssnano: {
      preset: 'advanced',
      autoprefixer: false,
      'postcss-zindex': false
    },
  }
}

然后当我运行 yarn dev 跑起项目的时候，提示警告如下：

Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:2940) postcss-custom-properties: variable '--van-success-color' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:3043) postcss-custom-properties: variable '--van-white' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:3080) postcss-custom-properties: variable '--van-danger-color' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:3139) postcss-custom-properties: variable '--van-danger-color' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:3242) postcss-custom-properties: variable '--van-white' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:3280) postcss-custom-properties: variable '--van-warning-color' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:3340) postcss-custom-properties: variable '--van-warning-color' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:3442) postcss-custom-properties: variable '--van-white' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:3979) postcss-custom-properties: variable '--van-font-size-md' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:4081) postcss-custom-properties: variable '--van-padding-xs' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:4121) postcss-custom-properties: variable '--van-font-size-sm' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:4420) postcss-custom-properties: variable '--van-padding-base' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:4459) postcss-custom-properties: variable '--van-font-size-xs' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:4538) postcss-custom-properties: variable '--van-padding-base' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:4659) postcss-custom-properties: variable '--van-disabled-opacity' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:4757) postcss-custom-properties: variable '--van-border-radius-max' is undefined and used without a fallback warning in ./node_modules/vant/es/button/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:5200) postcss-custom-properties: variable '--van-padding-base' is undefined and used without a fallback warning in ./node_modules/vant/es/dialog/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:983) postcss-custom-properties: variable '--van-font-size-lg' is undefined and used without a fallback warning in ./node_modules/vant/es/dialog/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:1021) postcss-custom-properties: variable '--van-white' is undefined and used without a fallback warning in ./node_modules/vant/es/dialog/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:1181) postcss-custom-properties: variable '--van-animation-duration-base' is undefined and used without a fallback warning in ./node_modules/vant/es/dialog/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:1409) postcss-custom-properties: variable '--van-font-weight-bold' is undefined and used without a fallback warning in ./node_modules/vant/es/dialog/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:1555) postcss-custom-properties: variable '--van-padding-lg' is undefined and used without a fallback warning in ./node_modules/vant/es/dialog/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:1761) postcss-custom-properties: variable '--van-padding-lg' is undefined and used without a fallback warning in ./node_modules/vant/es/dialog/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:1824) postcss-custom-properties: variable '--van-font-size-md' is undefined and used without a fallback warning in ./node_modules/vant/es/dialog/index.css Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (1:1870) postcss-custom-properties: variable '--van-line-height-md' is undefined and used without a fallback

我是@vue-cli 搭建的vue3 项目，引入的vant3.1.5 ,现在运行项目就提示这个错误。看错误提示是CSS变量没有识别到，请问各位这是缺少什么loader 么？

回答：

应该是webpack没配置忽略node_module的内容,可以配置一下,官方文档示例:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  }
}