angular - Angular 2 在使用 ExtractTextPlugin 时抛出“cssText.replace 不是函数”

Question

我有两个项目：Project A和Project B.

项目A

1. Webpack@2.2.1

2. Extract-text-webpack-plugin@2.0.0-rc.3

3. 角 2.4.3

项目 B

1. 角 2.4.3

Project B为Project A.

代码被编译（不捆绑）Project B到 dist 文件夹中，然后由Project Avia 使用npm link。

现在，webpack.common.js使用浏览器的设置ExtractTextPlugin会引发异常：

Angular 2 会抛出此异常，但仅在使用此插件时才会抛出。我这么说是因为如果我.css使用一切正常加载扩展程序raw-loader，但是当使用 ExtractTextPlugin 时，它就会中断。

有效的

webpack.config.js

module: {
   rules: [
      {
         test: /\.css$/,
         use: [ "raw-loader" ],
      }
   ]
}

输出：

无效（使用 ExtractTextPlugin）

webpack.config.js

module: {
   rules: [
      {
         test: /\.css$/,
         use: ExtractTextPlugin.extract( {
                  fallback: "raw-loader",
                  use: [ "raw-loader" ]
         } )
      }
   }
},
plugins: [
   new ExtractTextPlugin( "[name].css" ),
]

输出：

抛出异常：

Uncaught TypeError: cssText.replace is not a function
    at extractStyleUrls (http://localhost:8080/vendor.js:75001:52)

节点：6.2.0 操作系统：macOS Sierra (10.12.2)

Answer 1

尝试添加"angular2-template-loader":"^0.6.2"您的dependenciesin package.jsonthen exec npm i。这解决了我同样的问题

Answer 2

我刚刚遇到了这个问题，因为我有一个@Component styleUrl引用有效样式表文件但该文件为空的文件。删除不必要styleUrl的为我解决了这个问题。

Answer 3

检查this Webpack SASS build issue中的答案，一切编译正常，然后我得到一个JS错误

除了答案之外，您可以使用require或者您可以简单地使用您的 component.ts 文件顶部的import那些文件。.css

喜欢import '../assets/app.css';