css-loader打包出问题怎么解决

这篇文章主要讲解了“CSS-loader打包出问题怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css-loader打包出问题怎么解决”吧！

各种升级各种出bug，现在已经习惯了bug的出现，解决bug，bug不出现我还难受，整天在找bug，bug虐我千万遍，我待bug如初恋

先贴上bug

ERROR in ./main.css (./node_modules/css-loader/dist/cjs.js??ref–4-1!./main.css)

Module build failed (from ./node_modules/css-loader/dist/cjs.js):

ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the api schema.

options has an unknown property ‘minimize’. These properties are valid:

object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? }

原因是我使用了

css-loder?minimize

可是我死活找不到我使用的 css-loder?minimize

无奈之下，只好寻求度娘，度娘的朋友们总是说把 minimize 这个属性去掉就好了，可是我也没用到这个属性啊，原来是 webpack 3.0 之后以及 css-loader 1.0 以上已经将 minimize 这个属性去掉了导致报错

所以我就把 css-loader 降级到 0.28.7 版本，不得不说，vux-ui 这个组件库坑真的很多啊，谨慎入坑，坑比 element-ui 还多，

{

  "name": "xportal",

  "version": "0.1.0",

  "description": "erp 手机端 前端项目",

  "author": "xsw",

  "private": true,

  "scripts": {

    "dev": "Vue-cli-service serve --disableHostCheck=true --hot",

    "build": "vue-cli-service build --report --mode production",

    "sta": "vue-cli-service build --mode sta",

    "test": "vue-cli-service build --mode test",

    "test:unit": "vue-cli-service test:unit",

    "test:e2e": "vue-cli-service test:e2e",

    "bundle-report": "WEBpack-bundle-analyzer --port 8123 dist/stats.JSON"

  },

  "dependencies": {

    "@babel/preset-React": "^7.6.3",

    "async-validator": "^1.12.2",

    "axiOS": "^0.18.0",

    "better-scroll": "^1.15.2",

    "core-js": "^2.6.10",

    "crypto-js": "^3.1.9-1",

    "es6-promise": "^4.2.6",

    "html-webpack-plugin": "^3.2.0",

    "jsonwebtoken": "^8.5.1",

    "moment": "^2.24.0",

    "numeral": "^2.0.6",

    "vue": "^2.6.10",

    "vue2-storage": "^3.4.0",

    "vuex": "^3.0.1",

    "vux": "^2.9.4"

  },

  "devDependencies": {

    "@babel/core": "^7.6.4",

    "@babel/plugin-transfORM-runtime": "^7.6.2",

    "@babel/preset-env": "^7.6.3",

    "@vue/cli-plugin-babel": "^3.12.1",

    "@vue/cli-plugin-e2e-cypress": "^3.12.1",

    "@vue/cli-plugin-unit-jest": "^3.12.1",

    "@vue/cli-service": "^3.12.1",

    "@vue/test-utils": "1.0.0-beta.29",

    "babel-jest": "^23.6.0",

    "babel-loader": "^8.0.6",

    "babel-plugin-component": "^1.1.1",

    "babel-plugin-transform-remove-console": "^6.9.4",

    "compression-webpack-plugin": "^3.0.0",

    "css-loader": "^0.28.7",

    "cssnano": "^4.1.10",

    "glob-all": "^3.1.0",

    "less": "^3.10.3",

    "less-loader": "^5.0.0",

    "node-sass": "^4.12.0",

    "optimize-css-assets-webpack-plugin": "^5.0.3",

    "postcss-pxtorem": "^4.0.1",

    "purgecss-webpack-plugin": "^1.6.0",

    "sass-loader": "^8.0.0",

    "terser-webpack-plugin": "^2.2.1",

    "vue-loader": "^14.2.2",

    "vue-router": "^3.1.3",

    "vue-template-compiler": "^2.6.10",

    "vux-loader": "^1.2.9",

    "webpack-bundle-analyzer": "^3.6.0"

  },

  "postcss": {

    "plugins": {

      "autoprefixer": {},

      "postcss-pxtorem": {

        "rootValue": 32,

        "propList": [

          "*"

        ]

      }

    }

  },

  "browserslist": [

    "> 1%",

    "last 2 versions"

  ],

  "jest": {

    "moduleFileExtensions": [

      "js",

      "jsx",

      "json",

      "vue"

    ],

    "transform": {

      "^.+\\.vue$": "vue-jest",

      ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",

      "^.+\\.jsx?$": "babel-jest"

    },

    "transformIgnorePatterns": [

      "/node_modules/"

    ],

    "moduleNameMapper": {

      "^@/(.*)$": "<rootDir>/src/$1"

    },

    "snapshotSerializers": [

      "jest-serializer-vue"

    ],

    "testMatch": [

      "**/tests/unit*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"

    ],

    "testURL": "Http://localhost/",

    "watchPlugins": [

      "jest-watch-typeahead/filename",

      "jest-watch-typeahead/testname"

    ]

  }

}

感谢各位的阅读，以上就是“css-loader打包出问题怎么解决”的内容了，经过本文的学习后，相信大家对css-loader打包出问题怎么解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！