2
jptsterとangular2のbootstrap.scssファイルからwebpack構築モジュールに問題があります。Webpack Module build failedが有効なCSS値ではありません
私たちはこのエラーを取得し、この設定ファイルのための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バージョンの一部であるという考えを持っています。
私は4.2.0とノードのバージョンを使用していますNPMのバージョンが7.10.0
我々はそれがこの順序である実行方法です： 糸WebPACKの設定ファイル 糸スタートを実行するための 糸ベンダーをインストール
糸供給業者の設定ファイルを実行しているときに、cssのエラーが表示されます。
我々が使用しているWebPACKの設定ファイル（webpack.vendor.jsが）の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"
}
}
これは他の2つの開発者マシンで動作しますが、このマシンではこのエラーが発生し続けます。誰かが助けることを願っています
ほとんどの場合、**新しいバージョンのブートストラップ**があります。これは他の開発者がまだ持っているものと互換性がありません。あなたのバージョンが自分のバージョンと一致していることを確認してください。 –
下記の私の答えを見てください –