zoukankan      html  css  js  c++  java
  • 【webpack4x】postcss-loader无法自动添加浏览器前缀问题

    没有设置浏览器类型导致的无法生效

    // 1. npm install postcss-loader autoprefixer --save
    
    // 2. 在项目根目录下新建 postcss.config.js
    // 注意: 如果没有配置在哪些浏览器上自动添加前缀,会无法添加成功
    // postcss.config.js
    module.exports = {
        plugins: [
            require('autoprefixer')({
                "browsers": [
                    "defaults",
                    "not ie < 11",
                    "last 2 versions",
                    "> 1%",
                    "iOS 7",
                    "last 3 iOS versions"
                ]
            })
        ]
    }
    
    
    // 3. 在webpack配置文件中配置对应
    ...
    {
        test: /.css$/,
        use: [‘style-loader’, 'css-loader', 'postcss-loader']
    }, {
        test: /.sass$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
    }
    

    上述可以完成添加浏览器前缀,但是会报个警告
    Replace Autoprefixer browsers option to Browserslist config.
    Use browserslist key in package.json or .browserslistrc file.

    Using browsers option cause some error. Browserslist config
    can be used for Babel, Autoprefixer, postcss-normalize and other tools.

    If you really need to use option, rename it to overrideBrowserslist.

    Learn more at:
    https://github.com/browserslist/browserslist#readme
    https://twitter.com/browserslist

    解决办法

    // postcss.config.js 改
    // postcss.config.js
    module.exports = {
        plugins: [
            require('autoprefixer')()
        ]
    }
    
    // 然后在package.json中添加配置项
    "browserslist": [
        "defaults",
        "not ie < 11",
        "last 2 versions",
        "> 1%",
        "iOS 7",
        "last 3 iOS versions"
      ]
    
    

    github文档地址

    在单独打包css文件时遇到的问题

    ERROR in ./src/index.sass
    Module build failed (from ./node_modules/_mini-css-extract-plugin@0.8.0@mini-css-extract-plugin/dist/loader.js):
    ReferenceError: document is not defined

    {
        test: /.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
    }, {
        test: /.sass$/,
        use: [MiniCssExtractPlugin.loader,  'css-loader', 'postcss-loader', 'sass-loader']
    }
    

    mini-css-extract-plugin是将css打包成独立的css文件,而style-loader是将css以style标签的方式插入样式,是不是彼此存在冲突,于是删除style-loader发现问题解决

  • 相关阅读:
    java后台生成图片二维码
    layui框架下的摸索与学习
    eclipse/myeclipse中js/java的自动提示只有4个字符怎么解决
    Git日常操作指令
    node指南开发练习笔记(1)-- express
    echart全国主要城市某数据的显示
    微信公众号开发获取当前位置
    显示上传图片
    移动端Safari onclick事件兼容
    Plupload上传插件自定义图片的修改
  • 原文地址:https://www.cnblogs.com/fe-linjin/p/11326522.html
Copyright © 2011-2022 走看看