[Bug Report] 升级webpack v4后，打包报错"CssSyntaxError: <css input> Missed semicolon"

[X-Jagger]

问题描述

项目升级到webpack v4，本地dev运行没有问题，打包的时候出错 命令行一大堆css代码，然后是报错 CssSyntaxError: :6785:25: Missed semicolon，也完全看不出是哪里出的错 没升级之前没有这个问题

可以复现

反反复复调试后，发现 把‘duplicate-style’插件代码注释掉后，就打包正常

相关包version

 "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/helper-module-imports": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-jsx": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/runtime": "^7.3.1",
    "babel-eslint": "^9.0.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^8.0.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "git+https://github.com/wietseva/babel-plugin-transform-vue-jsx.git#babel7",
    "css-loader": "0.28.7",
    "eslint": "^4.14.0",
    "eslint-config-prettier": "^3.1.0",
    "eslint-plugin-vue": "^4.2.0",
    "express": "^4.16.3",
    "express-devtool": "^1.1.3",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "inline-manifest-webpack-plugin": "^4.0.2",
    "json-server": "^0.14.2",
    "less": "2.7.2",
    "less-loader": "4.0.5", 
    "postcss-loader": "^3.0.0",
    "preload-webpack-plugin": "^2.3.0",
    "style-loader": "^0.19.0",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "vue-loader": "^14.2.4",
    "vue-template-compiler": "2.5.2",
    "vux-loader": "^1.2.8",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14",
    "webpack-hot-middleware": "^2.21.2",
    "webpack-merge": "^4.1.0",
    "webpack-spritesmith": "^0.5.4"
  },
  "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "axios": "0.16.2",
    "core-js": "^2.5.7",
    "vue": "2.5.2",
    "vue-awesome-swiper": "^3.1.3",
    "vue-clip": "1.0.0",
    "vue-infinite-loading": "2.2.1",
    "vue-router": "3.0.1",
    "vuex": "^3.0.1",
    "vux": "^2.9.2"
  },

相关配置

var path = require('path');

module.exports = {
    options: {},
    plugins: [
        'vux-ui',
        'progress-bar',
        // 样式冗余 https://doc.vux.li/zh-CN/faq/dupicate-style.html
        {
            name: 'duplicate-style',
            options: {
                cssProcessorOptions: {
                    safe: true,
                    zindex: false,
                    autoprefixer: {
                        add: true,
                        browsers: ['iOS >= 6', 'Android >= 4.1']
                    }
                }
            }
        },
        {
            name: 'style-parser',
            fn: function(source) {
                return '@import "~resource/style/public.less";\n' + source;
            }
        },
        {
            name: 'less-theme',
            path: path.resolve(__dirname, 'src/resource/style/theme.less')
        }
    ]
};

new ExtractTextPlugin({
        filename: 'css/[name].[md5:contenthash:hex:20].css',
        allChunks: true
    }),
.....
{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
            less: ExtractTextPlugin.extract({
                use: ['css-loader', 'less-loader'],
                fallback: 'vue-style-loader'
            })
        },
        postcss: [
            autoprefixer({
                cascade: false
            })
        ]
    }
},
{
    test: /\.(css|less)$/,
    use: ExtractTextPlugin.extract({
        use: ['css-loader', 'less-loader'],
        fallback: 'style-loader'
    })
},

[AresBug]

试试https://www.npmjs.com/package/vux-cli3-loader

[airyland]

vux-loader 已经迁移到 vux 版本库里，并且发布为 @vux/loader，请参照这里 https://github.com/airyland/vux/issues/3430