Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to solve the problem packaged by css-loader". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to solve the problem packaged by css-loader.

All kinds of upgrades and all kinds of bug, now I am used to the emergence of bug, solving the problem that bug,bug does not appear is still hard for me. I have been looking for bug,bug to abuse me thousands of times all day, and I treat bug like my first love.

Paste bug first.

ERROR in. / main.css (. / node_modules/css-loader/dist/cjs.js??ref-4-1 room.Universe 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?}

The reason is that I used

Css-loder?minimize

But I couldn't find the css-loder?minimize I used.

In desperation, I had no choice but to seek Duniang. Duniang's friends always said that it would be good to remove the attribute minimize, but I didn't use it either. It turned out that after webpack 3.0and more than css-loader 1.0, the attribute minimize had been removed, resulting in an error report.

So I downgraded css-loader to version 0.28.7. I have to say that there are really a lot of holes in the vux-ui component library. Be careful to enter the hole, there are more holes than element-ui.

{

"name": "xportal"

"version": "0.1.0"

"description": "erp mobile front-end project"

"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 | ttf | woff | woff2) $": "jest-transform-stub"

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

}

"transformIgnorePatterns": [

"/ node_modules/"

]

"moduleNameMapper": {

"^ @ / (. *) $": "/ 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"

]

}

}

Thank you for your reading, the above is the content of "how to solve the problem packaged by css-loader". After the study of this article, I believe you have a deeper understanding of how to solve the problem of css-loader packaging, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.