使用cssText.replace时角2抛出“ExtractTextPlugin不是函数”

Question

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

项目A

1. Webpack@2.2.1
2. 摘录-文本-webpack-plugin@2.0.0-rc.3
3. 角2.4.3

项目B

1. 角2.4.3

Project B为Project A提供了一系列模块/组件。

代码由Project B编译(而不是捆绑)到一个dist文件夹中，然后由Project A通过npm link使用。

现在，当webpack.common.js设置使用ExtractTextPlugin时，浏览器抛出一个异常：

​

这个异常是由角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.0OS: macOS塞拉利昂(10.12.2)

Answer 1

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

Answer 2

在这个Webpack SASS build issue, everything compiles fine, then I get a JS error中检查答案

除了答案之外，您还可以使用require，也可以简单地将这些.css文件放在component.ts文件之上。

就像import '../assets/app.css';

Answer 3

尝试在"angular2-template-loader":"^0.6.2"中添加package.json中的dependencies，然后执行npm i。这解决了我同样的问题