如何使用 Webpack 和 Angular2 包含外部 css 文件?

2023-11-25

我正在尝试使用 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 is not a function

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

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

但运气不太好

任何帮助表示赞赏

regards

Sean


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

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

regards

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Webpack 和 Angular2 包含外部 css 文件? 的相关文章