Ошибка сборки модуля Webpack не является допустимым значением CSS

У нас возникла проблема со сборкой модулей webpack из файла 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, а версию узла 7.10.0.

Мы запускаем его в следующей последовательности: пряжа установить поставщика пряжи для запуска файла конфигурации веб-пакета

ошибка для css выдается при запуске файла конфигурации поставщика пряжи.

Файл конфигурации веб-пакета (webpack.vendor.js), который мы используем, подобен этому из хипстерской версии (выполняется путем вызова webpack/webpack.vendor.js --progress --profile && webpack -p --config из package.json файл см. ниже конфигурационный файл веб-пакета):


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"
  }
}

Он работает на двух других машинах разработчиков, но на моей машине он продолжает выдавать эту ошибку. Надеюсь, кто-то может помочь


person Kevin C.    schedule 06.09.2017    source источник
comment
Скорее всего, у вас более новая версия бутстрапа, которая несовместима с той, что есть у других разработчиков. Убедитесь, что ваша версия совпадает с их версией.   -  person Bhesh Gurung    schedule 07.09.2017
comment
см. мой ответ ниже   -  person Kevin C.    schedule 08.09.2017


Ответы (1)


Привет, мы обнаружили ошибку, связанную с package.json, где он имеет автоматическое увеличение версии. Что мы сделали, так это вернулись в наш репозиторий git и нашли package.json, где все это работает, и объединили его с новейшим package.json, который у нас есть, и удалили все ^ (чтобы у него не было автоматического увеличения версии). Наша ошибка в том, что автоматическая версия поднимается в первую очередь.

person Kevin C.    schedule 08.09.2017