postcss-pxtorem如何只转换mand-mobile组件的px

[u14e]

• Mand Mobile Version： 1.7.0

因为项目之前用了rem和px混合编写，目前按需加载mend-mobile组件，会打乱之前的size。希望postcss-pxtorem只转换mend-mobile组件里面的样式，看postcss-pxtorem官网貌似没有忽略文件的功能

cuth/postcss-pxtorem#39

• 我的配置文件

• .babelrc

{
  "plugins": [
    ["import",
      {
        "libraryName": "mand-mobile",
        "libraryDirectory": "lib"
      }
    ]
  ]
}

• .postcssrc.js

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": {
      rootValue: 100,
      propWhiteList: ['*'],
      selectorBlackList: [/^html$/]
    }
  }
}

[byterotate]

猜测您是在webpack中配置的postcss，可以对webpack的module.rules字段自定义匹配规则，针对node_modules/mand-mobile加载自定义的配置而不影响全局

[u14e]

@lucker2046 能不能提供一份参考的配置，webpack那边的配置有点理不清

[u14e]

webpack.base.conf.js做如下配置，还是不生效(webpack 3.6.0)

module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.css$/,
        include: [resolve('node_modules/mand-mobile')],
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          { loader: 'postcss-loader', 
            options: {
              plugins: [
                require('postcss-pxtorem')({
                  rootValue: 100,
                  propWhiteList: ['*']
                })
              ]
            }
          }
        ]
      }
    ]
  }

[xxyan0205]

.postcssrc.js 中postcss-pxtorem配置去掉没有？

[u14e]

已经注释掉了的

[xxyan0205]

{
  test: /\.css$/,
  use: {
    loader: 'css-loader'
  }
},
{
  test: /\.css$/,
  use: [
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 100,
            propWhiteList: []
          })
        ]
      }
    }
  ],
  include: [path.join(__dirname, '..', 'node_modules/mand-mobile')]
}

[vinceok]

@xxyan0205 大兄弟，怎么单独对mand设置rootValue？按你发的这个似乎不行，我用的scss

[mrossZ]

按照这么写 还是不行，项目直接就会报错

[xxyan0205]

上面只是一个思路，不一定能使用到每个工程里，因为可能会与原有配置有冲突。思路是将postcss-loader的配置通过test或者include区分开不同的目录或包，可按下面步骤初始化一个工程参考：

仅适用于mand-mobile/lib

• 初始化一个工程

vue init mand-mobile/mand-mobile-template my-mand-mobile-project

• 将postcssrc.js中有关postcss-pxtorem的配置去掉
• build/utils.js 中的styleLoaders改成如下

exports.styleLoaders = function (options) {
  const output = []
  const loaders = exports.cssLoaders(options)

  for (const extension in loaders) {
    const loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader,
      // exclude: resolve('node_modules/mand-mobile')
      exclude: [
        /mand-mobile.*\.css$/
      ]
    })
  }

  return output
}

• build/webpack.base.conf.js 中rules增加

{
        test:/mand-mobile.*\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('postcss-pxtorem')({
                  rootValue: 100,
                  propWhiteList: []
                })
              ]
            }
          }
        ],
        // include: resolve('node_modules/mand-mobile')
      }