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')
      }

[bart1989]

2019年3月22日 使用
vue init mand-mobile/mand-mobile-template my-mand-mobile-project 生成的工程

将你提到的 如下两个文件修改完成 无效 。

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')
})
}

return output
}
build/webpack.base.conf.js 中rules增加
{
test: /.css$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('postcss-pxtorem')({
rootValue: 100,
propWhiteList: []
})
]
}
}
],
include: resolve('node_modules/mand-mobile')
}
我看到是postcssrc.js中的 "postcss-pxtorem": config.mand.pxtorem依然在起作用。

[xxyan0205]

我看到是postcssrc.js中的 "postcss-pxtorem": config.mand.pxtorem依然在起作用。

将postcssrc.js中有关postcss-pxtorem的配置去掉

[bart1989]

将postcssrc.js中有关postcss-pxtorem的配置去掉的话，mand-mobile组件的css单位都是px，即pxtorem未生效。

[xxyan0205]

将postcssrc.js中有关postcss-pxtorem的配置去掉的话，mand-mobile组件的css单位都是px，即pxtorem未生效。

是否使用了cnpm安装依赖，如果是的话resolve('node_modules/mand-mobile')路径需要改为正则匹配

[bart1989]

ok解决了

[bihongbin3027]

感觉放大了一倍，好难处理啊，我用的是vue-cli3

[bihongbin3027]

vue-cli3如何配置postcss-pxtorem，能使大小正常

[xxyan0205]

vue-cli3如何配置postcss-pxtorem，能使大小正常

https://github.com/mand-mobile/vue-cli3-example

[bihongbin3027]

多谢，已经解决，我在vue-cli3的vue.config.js新增了以下代码：
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue : 75, // 换算的基数
minPixelValue: 2,
propList: ['*'],
}),
]
}
}
}
}

[leida1983]

vuecli 3.0 怎么弄

[xxyan0205]

也可参考 https://rgm-89sc.github.io/2019/05/201905311947/
by: RGM-89sc

[AlbatiQue]

Any idea how to get this integrated in a nuxt.js setup?
知道如何將這個集成到nuxt.js設置中嗎？

[xxyan0205]

Any idea how to get this integrated in a nuxt.js setup?
知道如何將這個集成到nuxt.js設置中嗎？

Add the following rule inbuild.extend:

export default {
  build: {
    extend (config) {
      config.module.rules.push({
        test:/mand-mobile.*\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('postcss-pxtorem')({
                  rootValue: 100,
                  propWhiteList: []
                })
              ]
            }
          }
        ],
      })
    }
  }
}

[coderBabao]

设置了还是很大。。

[xxyan0205]

设置了还是很大。。

那说明设置的不对，没起作用

[chenxi5211993]

多谢，已经解决，我在vue-cli3的vue.config.js新增了以下代码：
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue : 75, // 换算的基数
minPixelValue: 2,
propList: ['*'],
}),
]
}
}
}
}

老哥我也是用vue-cli3.0 引入后变的很大，具体你是怎么配置的babel.config.js俩面配置了么？

[chenxi5211993]

vue-cli3.0中引入的 组件特别大，按照刚才那个老哥的配置，有没有说一下具体配置流程的？

[chenxi5211993]

设置了还是很大。。

兄弟，你是怎么解决的？

[LouisTsang-jk]

我想只处理我项目里面某个文件夹里面的.vue文件，
改了之后，发现Mustache语法好像不生效了，
不清楚是不是对整个.vue文件都处理了，
然而默认全局处理的时候是只对style标签里面内容作处理的。

[tonylawx]

来挖一波坟,vue-cli 简单暴力解决方法

// vue.config.js
const pxtorem = require('postcss-pxtorem');

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('md-postcss')  // 新增规则，规则名自定义
      .test(/mand-mobile.*\.css$/)  // 用正则表达式匹配mand-mobile的组件目录下的所有css文件
      .use('css-loader')  // css加载器
      .loader('postcss-loader')  // css处理器
      .options({  // 这里的内容跟方法一中css.loaderOptions一样
        plugins: [
          pxtorem({
            rootValue: 30,
            minPixelValue: 2,
            propList: ['*'],
            selectorBlackList: []
          })
        ]
      });
  }
};

[suyan123]

我在项目中设置自身转换比例

又设置了mand-mobile的转换比例

但是运行的时候报

我查询了一下说是sass-loader版本过高导致，但是我更换了sass-loader版本不起作用 以下是我的配置