gpt4 book ai didi

css - 原始 css 未加载到我的 bundle.js Angular 2 应用程序中

转载 作者:行者123 更新时间:2023-11-28 06:02:54 27 4
gpt4 key购买 nike

我一直在寻找解决我的问题的方法,但找不到我的 CSS 未加载的原因。我有一个简单的 Angluar 2 应用程序,它在组件中需要 html 和 css。webpack 正在执行捆绑并创建 html 和 js 文件的 bundle.js。但是,它不会加载包内的 css 文件。它放置的不是我实际的 CSS:

function(module, exports) {
module.exports = "// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!./../../node_modules/css-loader/index.js!./print.css\");\nif(typeof content === 'string') content = [[module.id, content, '']];\n// add the styles to the DOM\nvar update = require(\"!./../../node_modules/style-loader/addStyles.js\")(content, {});\nif(content.locals) module.exports = content.locals;\n// Hot Module Replacement\nif(module.hot) {\n\t// When the styles change, update the <style> tags\n\tif(!content.locals) {\n\t\tmodule.hot.accept(\"!!./../../node_modules/css-loader/index.js!./print.css\", function() {\n\t\t\tvar newContent = require(\"!!./../../node_modules/css-loader/index.js!./print.css\");\n\t\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\t\t\tupdate(newContent);\n\t\t});\n\t}\n\t// When the module is disposed, remove the <style> tags\n\tmodule.hot.dispose(function() { update(); });\n}"/***/ }

这是我正在使用的 webpack.config 文件中与 css 部分相关的部分:

{
test: /\.css$/,
loader: 'raw'
},
{
test: /\.css$/,
loader: 'style!css'
},
{
test:/\.gif|png/, loader: "file-loader"
},
{
test: /\.html$/,
loader: 'raw'
}
resolve: {
extensions: ['', '.ts', '.js', '.json','.css', '.html']
}

在我的组件中,我只需要 html 和 css 文件。

@Component({
selector: 'my-app',
styles: [require('./my.css')],
template: require('./my.html')
})

放在 bundle.js 中的文本就像加载器找不到 css 文件,但它们与我正在加载的 html 文件位于相同的相对路径中。

有人知道可能是什么问题吗?

感谢任何建议,我尝试不同的事情时不知所措。

最佳答案

所以我发现了一个解决了我的问题的问题,至少解决了其中一个问题。我需要排除 serverd 文件夹下的 css,例如:

{
test: /\.css$/,
loader: 'style!css,
exclude: /app/
}

这样一来,样式器和加载器就不会选择这些 css,因为我认为,angular 需要一个文本列表作为 CSS。所以这解决了我的问题。

但我仍然有一个问题,我有它的窍门,但我不喜欢它。在更改我的应用程序以使用 webpack 作为 bundler 之前,我使用的是 npm 和 system.js(如 angular.io 网站上所述)。所以我在我的 index.html 中有一个全局 css 来完成我的应用程序的整体样式。但是改成webpack后明显不能像以前那样在index.html中引用全局样式了。为了让全局样式适用于我的所有应用程序,我将 ViewEncapsulation 模式更改为无(封装:ViewEncapsulation.None)。这行得通,但我不喜欢它,它看起来不对,而且我害怕在路上咬我。

有人知道如何为所有应用程序要求我的全局 css 吗?我找到了一种方法,但由于某种原因不起作用。我尝试了 ExtractTextPlugin,但无法正常工作。

{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
exclude: /app/
}

并添加到我的插件中:

plugins: [
new ExtractTextPlugin("./glob.css")
]

知道我做错了什么吗?

谢谢

关于css - 原始 css 未加载到我的 bundle.js Angular 2 应用程序中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36651563/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com