当使用ExtractTextPlugin

Question

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

项目A

1. Webpack@2.2.1

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

3. Angular 2.4.3

项目B

1. Angular 2.4.3

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

代码由Project B编译（未捆绑）到dist文件夹中，然后由Project A通过npm link使用。

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

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

VALID

webpack.config.js

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

输出：



INVALID（使用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

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

Answer 2

检查此Webpack SASS build issue, everything compiles fine, then I get a JS error

中的答案

除了答案，您可以使用require，也可以在component.ts文件的基础上import .css个文件。

赞import '../assets/app.css';

Answer 3

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