更新2：
我认为我已经将问题缩小到webpack.config.json中的css属性使用不同的加载程序。
我不确定这些配置是否正确。
{ test: /\.(css)$/, use:['raw-loader','iso-morphic-style-loader','css-loader'] }
更新：
只是想提一下，仅当我打包应用程序并将其部署时才会出现此问题。当我使用ng serve时，CSS效果很好。
还认为在构建应用程序时包括我正在运行的确切命令可能会很有用：
webpack --mode=development
我们正在使用带有角度的自定义Webpack配置，并将构建的文件部署到tomcat实例。
由于某种原因CSS无法呈现，并且样式标签似乎填充了JS而不是CSS样式，我不确定这是怎么回事。大多数样式位于src/styles.css中的CSS根目录中。但是，当您访问index.html时，不会加载任何样式。
这是什么
webpack.config.js看起来像
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
const { AngularCompilerPlugin } = require('@ngtools/webpack');
module.exports = function () {
return {
entry: {
main: './src/main.ts',
polyfills: './src/polyfills.ts',
styles: "./src/styles.css"
},
output: {
path: __dirname + '/dist',
filename: '[name].js'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{ test: /\.ts$/, loader: '@ngtools/webpack'},
{ test: /\.(html)$/, use: 'html-loader' },
// Use iso-morphic-style-loader instead of style-loader to avoid "ERROR in window is not defined."
{ test: /\.(css)$/, use:['raw-loader','iso-morphic-style-loader','css-loader'] }
]
},
plugins: [
new CopyWebpackPlugin([
{ from: 'src/assets', to: 'assets'}
]),
new HtmlWebpackPlugin({
template: __dirname + '/src/index.html',
output: __dirname + '/dist',
inject: 'head'
}),
new ScriptExtPlugin({
defaultAttribute: 'defer'
}),
new AngularCompilerPlugin({
tsConfigPath: './tsconfig.json',
entryModule: './src/app/app.module#AppModule',
sourceMap: true
})
]
};
}
这是<head>页的index.html中呈现的内容
<meta charset="utf-8">
<title>Ui</title>
<base href="/InternalGUI-InstallationGUI/v2/dist/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="main.js" defer=""></script><script type="text/javascript" src="polyfills.js" defer=""></script><script type="text/javascript" src="styles.js" defer=""></script><style>//[_ngcontent-c0] style-loader[_ngcontent-c0]: Adds[_ngcontent-c0] some[_ngcontent-c0] css[_ngcontent-c0] to[_ngcontent-c0] the[_ngcontent-c0] DOM[_ngcontent-c0] by[_ngcontent-c0] adding[_ngcontent-c0] a[_ngcontent-c0] <style[_ngcontent-c0] > tag
//[_ngcontent-c0] load[_ngcontent-c0] the[_ngcontent-c0] styles
var[_ngcontent-c0] content[_ngcontent-c0] =[_ngcontent-c0] require("!!../../node_modules/css-loader/index.js!./app.component.css")[_ngcontent-c0];
if(typeof[_ngcontent-c0] content[_ngcontent-c0] ===[_ngcontent-c0] 'string')[_ngcontent-c0] content[_ngcontent-c0] =[_ngcontent-c0] [[module.id[_ngcontent-c0], content[_ngcontent-c0], '']][_ngcontent-c0];
//[_ngcontent-c0] Prepare[_ngcontent-c0] cssTransformation
var[_ngcontent-c0] transform[_ngcontent-c0];
var[_ngcontent-c0] options[_ngcontent-c0] =[_ngcontent-c0] {}
options.transform[_ngcontent-c0] =[_ngcontent-c0] transform
//[_ngcontent-c0] add[_ngcontent-c0] the[_ngcontent-c0] styles[_ngcontent-c0] to[_ngcontent-c0] the[_ngcontent-c0] DOM
var[_ngcontent-c0] update[_ngcontent-c0] =[_ngcontent-c0] require("!../../node_modules/iso-morphic-style-loader/lib/addUniversalStyles.js")(content[_ngcontent-c0], options)[_ngcontent-c0];
if(content.locals)[_ngcontent-c0] module.exports[_ngcontent-c0] =[_ngcontent-c0] content.locals[_ngcontent-c0];
module.exports.__universal__[_ngcontent-c0] =[_ngcontent-c0] update.__universal__[_ngcontent-c0];
//[_ngcontent-c0] Hot[_ngcontent-c0] Module[_ngcontent-c0] Replacement
if(module.hot[_ngcontent-c0] &&[_ngcontent-c0] typeof[_ngcontent-c0] window[_ngcontent-c0] ===[_ngcontent-c0] 'object'[_ngcontent-c0] &&[_ngcontent-c0] window.document)[_ngcontent-c0] {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../node_modules/css-loader/index.js!./app.component.css", function() {
var newContent = require("!!../../node_modules/css-loader/index.js!./app.component.css");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}</style><style>//[_ngcontent-c1] style-loader[_ngcontent-c1]: Adds[_ngcontent-c1] some[_ngcontent-c1] css[_ngcontent-c1] to[_ngcontent-c1] the[_ngcontent-c1] DOM[_ngcontent-c1] by[_ngcontent-c1] adding[_ngcontent-c1] a[_ngcontent-c1] <style[_ngcontent-c1] > tag
//[_ngcontent-c1] load[_ngcontent-c1] the[_ngcontent-c1] styles
var[_ngcontent-c1] content[_ngcontent-c1] =[_ngcontent-c1] require("!!../../../node_modules/css-loader/index.js!./footer.component.css")[_ngcontent-c1];
if(typeof[_ngcontent-c1] content[_ngcontent-c1] ===[_ngcontent-c1] 'string')[_ngcontent-c1] content[_ngcontent-c1] =[_ngcontent-c1] [[module.id[_ngcontent-c1], content[_ngcontent-c1], '']][_ngcontent-c1];
//[_ngcontent-c1] Prepare[_ngcontent-c1] cssTransformation
var[_ngcontent-c1] transform[_ngcontent-c1];
var[_ngcontent-c1] options[_ngcontent-c1] =[_ngcontent-c1] {}
options.transform[_ngcontent-c1] =[_ngcontent-c1] transform
//[_ngcontent-c1] add[_ngcontent-c1] the[_ngcontent-c1] styles[_ngcontent-c1] to[_ngcontent-c1] the[_ngcontent-c1] DOM
var[_ngcontent-c1] update[_ngcontent-c1] =[_ngcontent-c1] require("!../../../node_modules/iso-morphic-style-loader/lib/addUniversalStyles.js")(content[_ngcontent-c1], options)[_ngcontent-c1];
if(content.locals)[_ngcontent-c1] module.exports[_ngcontent-c1] =[_ngcontent-c1] content.locals[_ngcontent-c1];
module.exports.__universal__[_ngcontent-c1] =[_ngcontent-c1] update.__universal__[_ngcontent-c1];
//[_ngcontent-c1] Hot[_ngcontent-c1] Module[_ngcontent-c1] Replacement
if(module.hot[_ngcontent-c1] &&[_ngcontent-c1] typeof[_ngcontent-c1] window[_ngcontent-c1] ===[_ngcontent-c1] 'object'[_ngcontent-c1] &&[_ngcontent-c1] window.document)[_ngcontent-c1] {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../../node_modules/css-loader/index.js!./footer.component.css", function() {
var newContent = require("!!../../../node_modules/css-loader/index.js!./footer.component.css");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}</style><style>//[_ngcontent-c2] style-loader[_ngcontent-c2]: Adds[_ngcontent-c2] some[_ngcontent-c2] css[_ngcontent-c2] to[_ngcontent-c2] the[_ngcontent-c2] DOM[_ngcontent-c2] by[_ngcontent-c2] adding[_ngcontent-c2] a[_ngcontent-c2] <style[_ngcontent-c2] > tag
//[_ngcontent-c2] load[_ngcontent-c2] the[_ngcontent-c2] styles
var[_ngcontent-c2] content[_ngcontent-c2] =[_ngcontent-c2] require("!!../../../node_modules/css-loader/index.js!./start.component.css")[_ngcontent-c2];
if(typeof[_ngcontent-c2] content[_ngcontent-c2] ===[_ngcontent-c2] 'string')[_ngcontent-c2] content[_ngcontent-c2] =[_ngcontent-c2] [[module.id[_ngcontent-c2], content[_ngcontent-c2], '']][_ngcontent-c2];
//[_ngcontent-c2] Prepare[_ngcontent-c2] cssTransformation
var[_ngcontent-c2] transform[_ngcontent-c2];
var[_ngcontent-c2] options[_ngcontent-c2] =[_ngcontent-c2] {}
options.transform[_ngcontent-c2] =[_ngcontent-c2] transform
//[_ngcontent-c2] add[_ngcontent-c2] the[_ngcontent-c2] styles[_ngcontent-c2] to[_ngcontent-c2] the[_ngcontent-c2] DOM
var[_ngcontent-c2] update[_ngcontent-c2] =[_ngcontent-c2] require("!../../../node_modules/iso-morphic-style-loader/lib/addUniversalStyles.js")(content[_ngcontent-c2], options)[_ngcontent-c2];
if(content.locals)[_ngcontent-c2] module.exports[_ngcontent-c2] =[_ngcontent-c2] content.locals[_ngcontent-c2];
module.exports.__universal__[_ngcontent-c2] =[_ngcontent-c2] update.__universal__[_ngcontent-c2];
//[_ngcontent-c2] Hot[_ngcontent-c2] Module[_ngcontent-c2] Replacement
if(module.hot[_ngcontent-c2] &&[_ngcontent-c2] typeof[_ngcontent-c2] window[_ngcontent-c2] ===[_ngcontent-c2] 'object'[_ngcontent-c2] &&[_ngcontent-c2] window.document)[_ngcontent-c2] {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../../node_modules/css-loader/index.js!./start.component.css", function() {
var newContent = require("!!../../../node_modules/css-loader/index.js!./start.component.css");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}</style><style>//[_ngcontent-c3] style-loader[_ngcontent-c3]: Adds[_ngcontent-c3] some[_ngcontent-c3] css[_ngcontent-c3] to[_ngcontent-c3] the[_ngcontent-c3] DOM[_ngcontent-c3] by[_ngcontent-c3] adding[_ngcontent-c3] a[_ngcontent-c3] <style[_ngcontent-c3] > tag
//[_ngcontent-c3] load[_ngcontent-c3] the[_ngcontent-c3] styles
var[_ngcontent-c3] content[_ngcontent-c3] =[_ngcontent-c3] require("!!../../../node_modules/css-loader/index.js!./loading-spinner.component.css")[_ngcontent-c3];
if(typeof[_ngcontent-c3] content[_ngcontent-c3] ===[_ngcontent-c3] 'string')[_ngcontent-c3] content[_ngcontent-c3] =[_ngcontent-c3] [[module.id[_ngcontent-c3], content[_ngcontent-c3], '']][_ngcontent-c3];
//[_ngcontent-c3] Prepare[_ngcontent-c3] cssTransformation
var[_ngcontent-c3] transform[_ngcontent-c3];
var[_ngcontent-c3] options[_ngcontent-c3] =[_ngcontent-c3] {}
options.transform[_ngcontent-c3] =[_ngcontent-c3] transform
//[_ngcontent-c3] add[_ngcontent-c3] the[_ngcontent-c3] styles[_ngcontent-c3] to[_ngcontent-c3] the[_ngcontent-c3] DOM
var[_ngcontent-c3] update[_ngcontent-c3] =[_ngcontent-c3] require("!../../../node_modules/iso-morphic-style-loader/lib/addUniversalStyles.js")(content[_ngcontent-c3], options)[_ngcontent-c3];
if(content.locals)[_ngcontent-c3] module.exports[_ngcontent-c3] =[_ngcontent-c3] content.locals[_ngcontent-c3];
module.exports.__universal__[_ngcontent-c3] =[_ngcontent-c3] update.__universal__[_ngcontent-c3];
//[_ngcontent-c3] Hot[_ngcontent-c3] Module[_ngcontent-c3] Replacement
if(module.hot[_ngcontent-c3] &&[_ngcontent-c3] typeof[_ngcontent-c3] window[_ngcontent-c3] ===[_ngcontent-c3] 'object'[_ngcontent-c3] &&[_ngcontent-c3] window.document)[_ngcontent-c3] {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../../node_modules/css-loader/index.js!./loading-spinner.component.css", function() {
var newContent = require("!!../../../node_modules/css-loader/index.js!./loading-spinner.component.css");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}</style>
如您所见，在这些<style>标记中放了很多javascript，我不确定是否应该发生这种情况，或者webpack.config.js是否存在问题。