vue中使用px2remLoader，只转换了vue文件中的px，如何使外部css文件中px也转换成rem

发布于
2017-12-19

按照网上的教程在vue工程中导入了px2remLoader
var px2remLoader = {

    loader: 'px2rem-loader',
    options: {
        remUnit: 32
    }
}

function generateLoaders(loader, loaderOptions) {

    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
    if(loader) {
        loaders.push({
            loader: loader + '-loader',
            options: Object.assign({}, loaderOptions, {
                sourceMap: options.sourceMap
            })
        })
    }

项目运行后vue文件中的px都转换成了rem，但import引入的css文件中的px没有被处理成rem。

vue.js

阅读 11.3k

4 个回答

keep_M

或者是需要再增加一个
postcss-pxtorem

{
    test: /\.css$/,
    use: {
            loader: 'css-loader',
            options: {
                importLoaders: 1
            }
        },
        {
            loader: 'postcss-loader',
            options: {
                plugins: (loader) => [
                    pxtorem({ //将px转换为rem
                       rootValue: 100,
                       propWhiteList: [],
                    }),
                    require('autoprefixer')({
                        browsers: ['last 20 versions']
                    })
                ]
            }
        }
},
{
    test:/\.vue$/,
    loader: 'vue-loader',
    exclude:/node_modules/,
    options: {
        postcss: [pxtorem({ 
                rootValue: 100,
                propWhiteList: [],
            }),
            require('autoprefixer')({
                browsers: ['last 20 versions']
            })
        ],
    }
},