H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

按照网上的教程在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。

回答:

或者是需要再增加一个
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']
            })
        ],
    }
},

回答:

可以参考 https://github.com/zdliuccit/…

回答:

请问你这问题解决了吗,我在引用vux外部的css没有转换,ui的样式变小了

本文地址:H5W3 » vue中使用px2remLoader,只转换了vue文件中的px,如何使外部css文件中px也转换成rem

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址