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打包出問題怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！