未加载原始CSS我的bundle.js Angular 2应用程序

我一直在寻找解决我的问题，但无法找到为什么我的CSS没有被加载。我有一个简单的Angluar 2应用程序需要在组件中的HTML和CSS。 webpack正在捆绑并创建html和js文件的bundle.js。但是，它不会加载包中的css文件。相反，我实际的CSS却让：未加载原始CSS我的bundle.js Angular 2应用程序

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文件相同的相对路径。

有谁知道可能是什么问题？

欣赏任何建议，我尝试了不同的事情而处于亏损状态。

来源

2016-04-15 Afi

所以我发现了一个问题，解决了我的问题，至少其中之一。我需要排除的CSS在我的文件夹服务器D一样：

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

所以这样的CSS不会通过造型器和加载器，因为我觉得被拾起，角度需要文本作为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") 
]

任何想法我做错了什么？

谢谢

来源

2016-04-15 19:58:32 Afi

未加载原始CSS我的bundle.js Angular 2应用程序

回答

相关问题