这篇文章主要讲解了“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打包出问题怎么解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
