Webpack 模块构建失败不是有效的 CSS 值

Posted 2023-02-16

【中文标题】Webpack 模块构建失败不是有效的 CSS 值

【英文标题】：Webpack Module build failed isn't a valid CSS value

【发布时间】：2018-02-15 12:01:22

【问题描述】：

我们在从 bootstrap.scss 文件为 jhipster 和 angular2 构建模块时遇到问题。

当我们为这个配置文件运行 webpack 构建命令时，我们得到这个错误：

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader/lib/loader.js!./src/main/webapp/content/scss/vendor.scss
Module build failed: 
  0: (
    ^
      (x: 0, y: 0) isn't a valid CSS value.
      in xxxxxx/src/main/webapp/content/scss/bootstrap.scss (line 146, column 6)
 @ ./src/main/webapp/content/scss/vendor.scss 4:14-194
 @ ./src/main/webapp/app/vendor.ts
 @ dll vendor

我知道这是由配置文件或我们正在使用的某些 node_moudles 版本引起的。

我使用的npm版本是4.2.0，node版本是7.10.0

我们运行它的方式是这样的： 纱线安装 yarn vendor 运行 webpack 配置文件 纱线开始

运行 yarn vendor 配置文件时出现 css 错误。

我们正在使用的 webpack 配置文件（webpack.vendor.js）是来自 hipster 版本的（通过调用 webpack/webpack.vendor.js --progress --profile && webpack -p --config 从package.json 文件见下面的 webpack 配置文件）：

---

const webpack = require('webpack');
const path = require('path');

module.exports = 
    entry: 
        'vendor': [
            './src/main/webapp/app/vendor',
            '@angular/common',
            '@angular/compiler',
            '@angular/core',
            '@angular/forms',
            '@angular/http',
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/router',
            '@ng-bootstrap/ng-bootstrap',
            'ngx-infinite-scroll',
            'jquery',
            'ng-jhipster',
            'ng2-webstorage',
            'ngx-cookie',
            'rxjs'
        ]
    ,
    resolve: 
        extensions: ['.ts', '.js'],
        modules: ['node_modules']
    ,
    module: 
        exprContextCritical: false,
        rules: [
            
                test: /(vendor\.scss|global\.scss)/,
                loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
            ,
            
                test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
                loaders: ['file-loader?hash=sha512&digest=hex&name=content/[hash].[ext]']
            
        ]
    ,
    output: 
        filename: '[name].dll.js',
        path: path.resolve('./target/www'),
        library: '[name]'
    ,
    plugins: [
        new webpack.DllPlugin(
            name: '[name]',
            path: path.resolve('./target/www/[name].json')
        )
    ]
;

---

打包的 json 文件如下所示：

  "name": "xxxx",
  "version": "0.0.0",
  "description": "Description for xxx",
  "private": true,
  "cacheDirectories": [
    "node_modules"
  ],
 "dependencies": 
    "@agm/core": "^1.0.0-beta.1",
    "@angular/common": "^4.3.6",
    "@angular/compiler": "^4.3.6",
    "@angular/core": "^4.3.6",
    "@angular/forms": "^4.3.6",
    "@angular/http": "^4.3.6",
    "@angular/platform-browser": "^4.3.6",
    "@angular/platform-browser-dynamic": "^4.3.6",
    "@angular/router": "^4.3.6",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.3",
    "bootstrap": "^4.0.0-beta",
    "core-js": "^2.5.1",
    "font-awesome": "^4.7.0",
    "gsap": "^1.20.2",
    "jquery": "3.2.1",
    "ng-jhipster": "0.2.6",
    "ng2-webstorage": "1.8.0",
    "ng4-geoautocomplete": "0.0.9",
    "ngx-cookie": "1.0.0",
    "ngx-infinite-scroll": "0.4.1",
    "normalize-scss": "^7.0.0",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.4.3",
    "swagger-ui": "^2.2.10",
    "tether": "^1.4.0",
    "zone.js": "^0.8.17"
  ,
  "devDependencies": 
    "@angular/cli": "^1.2.0",
    "@angular/compiler-cli": "4.1.3",
    "@types/gsap": "^1.19.1",
    "@types/jasmine": "2.5.47",
    "@types/node": "7.0.22",
    "add-asset-html-webpack-plugin": "1.0.2",
    "angular2-template-loader": "0.6.2",
    "angular2-uuid": "^1.1.1",
    "awesome-typescript-loader": "3.1.3",
    "browser-sync": "2.18.12",
    "browser-sync-webpack-plugin": "1.1.4",
    "codelyzer": "2.1.1",
    "copy-webpack-plugin": "4.0.1",
    "css-loader": "0.28.3",
    "del": "2.2.2",
    "event-stream": "3.3.4",
    "exports-loader": "0.6.4",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "generator-jhipster": "4.5.1",
    "gulp": "^3.9.1",
    "gulp-connect": "^5.0.0",
    "gulp-sass": "^3.1.0",
    "gulp-shell": "^0.6.3",
    "gulp-wait": "^0.0.2",
    "html-loader": "0.4.5",
    "html-webpack-plugin": "2.28.0",
    "jasmine-core": "2.6.2",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-coverage": "1.1.1",
    "karma-intl-shim": "1.0.3",
    "karma-jasmine": "1.1.0",
    "karma-junit-reporter": "1.2.0",
    "karma-notify-reporter": "1.0.1",
    "karma-phantomjs-launcher": "1.0.4",
    "karma-remap-istanbul": "0.6.0",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "2.0.3",
    "kss": "^3.0.0-beta.18",
    "lazypipe": "1.0.1",
    "lodash": "4.17.4",
    "map-stream": "0.0.7",
    "merge-jsons-webpack-plugin": "1.0.6",
    "node-sass": "4.5.3",
    "phantomjs-prebuilt": "2.1.14",
    "plop": "^1.8.1",
    "postcss-loader": "1.3.0",
    "proxy-middleware": "0.15.0",
    "rimraf": "2.6.1",
    "run-sequence": "1.2.2",
    "sass-loader": "5.0.1",
    "sourcemap-istanbul-instrumenter-loader": "0.2.0",
    "string-replace-webpack-plugin": "0.1.3",
    "style-loader": "0.16.1",
    "to-string-loader": "1.1.5",
    "tslint": "4.5.1",
    "tslint-loader": "3.5.3",
    "typescript": "2.3.3",
    "web-app-manifest-loader": "0.1.1",
    "webpack": "2.6.1",
    "webpack-dev-server": "2.4.5",
    "webpack-merge": "4.1.0",
    "webpack-notifier": "1.5.0",
    "webpack-visualizer-plugin": "0.1.11",
    "write-file-webpack-plugin": "3.4.2",
    "xml2js": "0.4.17",
    "yargs": "6.6.0"
  ,
  "engines": 
    "node": ">=6.9.0"
  ,
  "scripts": 
    "cleanup": "rimraf target/aot,www",
    "generate": "plop",
    "kss": "kss --config kss-config.json",
    "ngc": "ngc -p tsconfig-aot.json",
    "start": "yarn run webpack:dev",
    "vendor": "webpack --config webpack/webpack.vendor.js --progress --profile",
    "webpack:dev": "webpack-dev-server --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060",
    "webpack:build:vendor": "webpack --config webpack/webpack.vendor.js --progress --profile",
    "webpack:build:dev": "webpack --config webpack/webpack.dev.js --progress --profile",
    "webpack:build": "yarn run cleanup && yarn run webpack:build:vendor && yarn run webpack:build:dev",
    "webpack:prod": "yarn run cleanup && webpack -p --config webpack/webpack.vendor.js --progress --profile && webpack -p --config webpack/webpack.prod.js --progress --profile"
  

---

它可以在另外两台开发人员机器上运行，但在我的机器上却一直出现此错误。希望有人可以帮忙

【问题讨论】：

很可能您拥有 较新版本的引导程序，它与其他开发人员仍然拥有的不兼容。确保您的版本与他们的一致。

在下面查看我的答案

【参考方案1】：

您好，我们发现它与 package.json 相关的错误，它具有自动版本提升。我们所做的是回到我们的 git 存储库并找到一个 package.json 并在其中工作并合并，它与我们拥有的最新 package.json 并删除所有 ^ （因此它没有自动版本提升）。我们的一个错误是一开始就自动升级版本。