Webpack 和外部（供应商）.css答案

【问题标题】：Webpack and external (vendor) .cssWebpack 和外部（供应商）.css
【发布时间】：2016-03-31 10:34:03
【问题描述】：

我正在慢慢地将 Webpack 引入现有项目。此时我们不会require .css 文件。但是，我希望 Webpack 仍然处理它们。

我希望 Webpack 只加载文件，将其传递给所需的任何 .css 加载器（在我们的例子中为 Stylus），然后输出一个 .css 文件。

ExtractTextPlugin、raw 和文件加载器的组合，将加载器传递给其他加载器都不起作用，Webpack 不可避免地抛出

Module build failed: ParseError: ...bootstrap-theme.min.css:5:1996
   1| /*!
   2|  * Bootstrap v3.3.5 (http://getbootstrap.com)
   3|  * Copyright 2011-2015 Twitter, Inc.
...
expected "indent", got ";"

甚至可以像这样用 Webpack 处理外部文件吗？

尝试了各种组合：

  {
    test:   /\.(styl|css)/,
    loader: 'raw!stylus'
  }

  {
    test:   /\.(styl|css)/,
    loader: 'file!stylus'
  }


  {
    test:   /\.(styl|css)/,
    loader: ExtractTextPlugin.extract('file', 'raw!stylus')
  }


  {
    test:   /\.(styl|css)/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader')
  }

【问题讨论】：

标签： javascript css webpack

【解决方案1】：

您不需要通过 stylus 加载器传递 css 文件，只需传递 .styl 文件即可。

我已经设法使它与这个配置一起工作：

module.exports = {
  entry: {
    name: './test.js'
  },
  output: {
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style', 'css']
      },
      {
        test: /\.styl$/,
        loaders: ['style', 'css', 'stylus']
      },
      {
        test:/\.(woff2?|eot|ttf|svg)$/,
        loader: 'url'
      }
    ]
  }
}

然后您可以像这样导入/要求您的 css 文件：

require('./test.css');
require('./node_modules/bootstrap/dist/css/bootstrap.min.css');

【讨论】：

就是这样：我还不想require他们。但是，我想，webpack 没有办法解决这个问题

【解决方案2】：

您还可以将 CSS 添加为 name 的额外入口点：

module.exports = {
  entry: {
    name: [
      './test.js',
      './test.css',
    ],
  },
  /* … */
};

【讨论】：