未在my bundle.js Angular 2应用程序中加载原始css

未在my bundle.js Angular 2应用程序中加载原始css,css,angular,webpack,Css,Angular,Webpack,我一直在寻找我的问题的解决方案,但找不到为什么我的css没有被加载。 我有一个简单的Angluar2应用程序,在组件中需要html和css。 Web包正在进行绑定,并创建html和js文件的bundle.js。但是,它不会加载捆绑包中的css文件。而不是我的实际css,它放: function(module, exports) { module.exports = "// style-loader: Adds some css to the DOM by adding a <sty

我一直在寻找我的问题的解决方案,但找不到为什么我的css没有被加载。 我有一个简单的Angluar2应用程序,在组件中需要html和css。 Web包正在进行绑定,并创建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}"/***/ }
在我的组件中,我只需要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作为捆绑包之前,我使用的是npm和system.js(如angular.io网站上所述)。因此,我在index.html中有一个全局css,它对我的应用程序进行了总体样式设计。但在更改为webpack后,显然无法像以前一样在index.html中引用全局样式。为了在我的所有应用程序上进行全局样式设计,我将ViewEncapsulation模式更改为None(封装:ViewEncapsulation.None)。这是可行的,但我不喜欢它,它似乎不正确,我害怕在路上咬我

有人知道如何在所有应用程序中使用我的全局css吗? 我找到了一种方法,但由于某种原因,它不起作用。 我尝试了ExtractTextPlugin,但没能让它工作

{
    test: /\.css$/,  
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
    exclude: /app/
}
并添加到我的插件中:

plugins: [
new ExtractTextPlugin("./glob.css")
]
知道我做错了什么吗

谢谢

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