如何使用Webpack和Angular2包含外部CSS文件? [英] How to include an external css file using Webpack and Angular2?

问题描述

我正在尝试使用Webpack在Angular2中添加对CSS文件的外部引用. 我的CSS定义为

I am trying to add an external reference to a CSS file in Angular2 using Webpack. My css is defined as

{ test: /\.css$/, loader: "style-loader!css-loader" },

在我的webpack.config.js文件中，并且可以在打字稿文件的头部进行加载时很好地加载CSS:

in my webpack.config.js file and I can load css just fine when doing in a head of a typescript file:

require("./styles/style.css");

但是，当我尝试在组件中内联加载CSS文件时，如下所示:

However when I try and load a CSS file inline inside a component as in:

@Component({
selector: 'todo-list',
template: `
            <section class="todoapp">                 
            </section>
`,
styles: [require('./Todolist.css')], // <--------------
directives: [TodoItem],
providers: [TodosService]
...

我收到以下错误:EXCEPTION:TypeError:s.replace不是函数

I get an error of: EXCEPTION: TypeError: s.replace is not a function

我还尝试通过以下方式加载CSS:

I also tried to load CSS via:

styles: [require('style-loader!css-loader!./Todolist.css')]

但运气不大

感谢您的帮助

致谢

塞恩

推荐答案

诀窍是将css作为原始文本加载到webpack.config.js中

What did the trick was to load css as raw text in the webpack.config.js

{
    test: /\.css$/,
    loader: 'raw!postcss'
},

致谢

这篇关于如何使用Webpack和Angular2包含外部CSS文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！