Vue-cli: vue cli 3.x ， import postcss-pxtorem , not work (第三方postcss 插件不配置生效)

Created on 21 Aug 2018 · 6Comments · Source: vuejs/vue-cli

Version

3.0.1

Reproduction link

https://github.com/MaxMooc/vue-cli-3.x-test.git

Node and OS info

node (v8.11.2) npm (v6.3.0)

Steps to reproduce

I am new to vue。Don't know the cli 3 x to create projects, how to introduce a third party postcss plug-ins, such as postcss - theme -variables or postcss - pxtorem, I in vue. Config. Js, CSS. LoaderOptions. Postcss, does not work, please give sample, thank you very much. (from google translation)

What is expected?

postcss-theme-variables and postcss-pxtorem work

What is actually happening?

not work

Source

MaxMooc

Most helpful comment

如果通过 loaderOptions 配置的话请参考 postcss-loader 的文档

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [require('postcss-pxtorem')({ rootValue: 75 })]
      }
    }
  }
}

也可以使用 postcss.config.js 或任何 postcss-load-config 支持的配置源来配置，配置格式在上述文档里也有提到（注意，如果创建项目时没有选择 in dedicated config files 的话，默认是会把 autoprefixer 配置写在 package.json 里了的，需要当心一下不要被覆盖了）。

module.exports = {
  plugins: {
    'postcss-pxtorem': { rootValue: 75 }
  }
}

sodatea on 21 Aug 2018

👍3

All 6 comments

vue cli 3.0.1创建的项目，使用的postcss-pxtorem，在vue.config.js中 css..loaderOptions..postcss 中配置的，可否给个post第三方插件的配置代码，感谢

module.exports = {
    productionSourceMap: false,
    lintOnSave: true,
    css: {
        modules: true,
        loaderOptions: {
            postcss: {
                'postcss-pxtorem': {
                    rootValue: 75,
                    unitPrecision: 5,
                    propList: ['*', '!font-size', '!line-height'],
                    selectorBlackList: [],
                    minPixelValue: 12
                },
                'postcss-theme-variables': {
                    vars: {
                        white: '#000'
                    },
                    prefix: '$'
                }
            }
        }
    }
};

MaxMooc on 21 Aug 2018

如果通过 loaderOptions 配置的话请参考 postcss-loader 的文档

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [require('postcss-pxtorem')({ rootValue: 75 })]
      }
    }
  }
}

module.exports = {
  plugins: {
    'postcss-pxtorem': { rootValue: 75 }
  }
}

sodatea on 21 Aug 2018

👍3

Has it been resolved?

expanding on 2 Nov 2018

{
    rootValue: 16,
    unitPrecision: 5,
    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
    selectorBlackList: [],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0
}

Try to check propList option.