typescript – 如何使用Webpack和Angular2包含外部css文件？

发布时间：2020-12-17 07:26:53 所属栏目：安全来源：网络整理

导读：我试图使用Webpack在Angular2中添加一个CSS文件的外部引用. 我的css被定义为 { test: /.css$/,loader: "style-loader!css-loader" }, 在我的webpack.config.js文件中,我可以在打字脚本文件的头部中加载css： require("./styles/style.css"); 但是,当我尝试

我试图使用Webpack在Angular2中添加一个CSS文件的外部引用.
我的css被定义为

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

在我的webpack.config.js文件中,我可以在打字脚本文件的头部中加载css：

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

但是,当我尝试在组件内部加载CSS文件时,如下所示：

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

我得到一个错误：EXCEPTION：TypeError：s.replace不是一个函数

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

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

但运气不大

任何帮助表示赞赏

问候

肖恩

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

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

问候

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!