Question

我正在尝试使用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不是函数

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

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

但运气不太好

感谢任何帮助

问候

肖恩

Answer 1

在webpack.config.js

中加载css作为原始文本的诀窍是什么？

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

问候

Answer 2

我目前使用Angular 2进行WebPack 2的解决方案，用于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，上面的解决方案不再适用。

addional devdependencies

"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

对您的网络包配置（开发）的更改 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

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

4 个答案: