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

Question

我正在尝试使用 Webpack 在 Angular2 中添加对 CSS 文件的外部引用。 我的 css 被定义为

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

在我的 webpack.config.js 文件中，我可以在 typescript 文件的头部加载 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')]

但运气不太好

感谢任何帮助

问候

肖恩

Answer 1

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

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

问候

Answer 2

我当前的 WebPack 2 解决方案和 Angular 2 for css 或 scss Loader；

  {
      test: /\.css$/,
      loader: [
          ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: 'css-loader' }),
          'to-string-loader',
          'css-loader'
      ],
      exclude: [helpers.root('Content')],
      include: [helpers.root('App')]
  },
  {
      test: /\.scss$/,
      loader: [ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader'] }),
          'to-string-loader',
          'css-loader',
          'sass-loader'
      ],
      exclude: [helpers.root('Content')],
      include: [helpers.root('App')]
  },

插件：

  new ExtractTextPlugin({ filename: "[name].css" }),

现在您可以在组件中使用以下内容

@Component({
   selector: 'logmonitor',
   styleUrls: ['./logmonitor.component.scss', './logmonitor.component.css'],
   templateUrl: './logmonitor.component.html'
})

我当前的 DevDependencies 是：

 "devDependencies": {
   "@types/node": "6.0.51",
   "angular2-template-loader": "0.6.0",
   "awesome-typescript-loader": "2.2.4",
   "css-loader": "0.26.1",
   "css-to-string-loader": "0.1.2",
   "file-loader": "0.9.0",
   "url-loader": "0.5.7",
   "html-loader": "0.4.4",
   "svg-url-loader": "1.1.0",
   "less": "2.7.1",
   "less-loader": "2.2.3",
   "node-sass": "3.13.0",
   "sass-loader": "4.0.2",
   "style-loader": "0.13.1",
   "raw-loader": "0.5.1",
   "to-string-loader": "1.1.5",
   "clean-webpack-plugin": "0.1.4",
   "extract-text-webpack-plugin": "2.0.0-beta.4",
   "html-webpack-plugin": "2.21.0",
   "webpack-notifier": "1.4.1",
   "webpack": "2.1.0-beta.27",
   "webpack-dev-middleware": "1.8.4",
   "webpack-dev-server": "2.1.0-beta.12",
   "webpack-md5-hash": "0.0.5",
   "webpack-merge": "0.17.0",
   "typescript": "2.0.10",
   "typings": "2.0.0"
 }

更新 对于 Webpack 2.2.1 和 extract-text-webpack-plugin 2.0.0-rc.3 ，上面的解决方案不再起作用。

其他依赖项

"extract-text-webpack-plugin": "2.0.0-rc.3",
"postcss-loader": "1.3.0",
"postcss-import":  "9.1.0",
"autoprefixer": "6.7.2",
"webpack": "2.2.1",

你需要在你的应用的根目录中添加一个 postcss.config.js 的内容

module.exports = {
    plugins: [
         require('postcss-import')(),
         require('autoprefixer')()
    ]
};

scss 的新规则如下

{
    test: /\.scss$/,
    loader: [
        { loader: 'raw-loader' },
        { loader: 'sass-loader', query: { sourceMaps: true } },
        { loader: 'postcss-loader' }
    ],
    exclude: [helpers.root('Content')],
    include: [helpers.root('App')]
 }

Answer 3

我已经发布了类似问题的答案，希望它可以帮助您了解 styles/styleUrls 在 angular2 中的工作原理。我证明有一段代码可以通过您的组件将 css 附加到应用程序中。

Load external css style into Angular 2 Component

Answer 4

您需要安装的模块：

css-loader style-loader 和 可选但推荐 url-loader

更改您的 webpack 配置（开发） module: { loaders: [ // CSS { test: /\.css$/, loader: "style-loader!css-loader", }, /* rest of your loaders */ ]

在您的主 javascript 文件中包含您的 css 文件

import '../css/bootstrap.min.css';

现在，特别是在引导的情况下，您将收到如下错误：

./~/css-loader!./client/css/bootstrap.min.css 中的错误 找不到模块：错误：无法解析模块“url-loader” @ ./~/css-loader!./client/css/bootstrap.min.css 6:3278-3330 6:3348-3400

./~/css-loader!./client/css/bootstrap.min.css 中的错误 找不到模块：错误：无法解析模块“url-loader” @ ./~/css-loader!./client/css/bootstrap.min.css 6:3449-3503

./~/css-loader!./client/css/bootstrap.min.css 中的错误 找不到模块：错误：无法解析模块“url-loader” @ ./~/css-loader!./client/css/bootstrap.min.css 6:3533-3586

在这种情况下，您需要在本地下载上述文件 并将此条目添加到您的 webpack 配置中（在 "loaders" 部分中，如上面的第一个）

{
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
    loader: 'url-loader',
    options: {
      limit: 10000
    }
}]

这就是你需要安装 url-loader 包的原因，但只有当你的 css 依赖于其他图像/字体文件时才需要它。

注意： 显然，对于生产用途，最好使用涉及@squadwuschel 提到的ExtractTextPlugin 的更复杂的设置

这里是您可能需要的所有详细信息 https://webpack.github.io/docs/stylesheets.html