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

【问题标题】：Raw css not being loaded in my bundle.js Angular 2 app我的 bundle.js Angular 2 应用程序中未加载原始 css
【发布时间】：2016-08-07 16:29:39
【问题描述】：

我一直在寻找解决问题的方法，但找不到我的 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 文件位于相同的相对路径。

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

感谢任何建议，我因尝试不同的事情而不知所措。

【问题讨论】：

标签： css angular webpack

【解决方案1】：

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

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

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

但我仍然有一个问题，我有一个 hack，但我不喜欢它。在将我的应用程序更改为使用 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")
]

任何想法我做错了什么？

谢谢

【讨论】：