Webpack和外部（供应商）.css

Question

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

我希望Webpack仅加载文件，将其传递到所需的任何.css加载器（在我们的情况下为Stylus ），然后输出.css文件。

ExtractTextPlugin，原始和文件加载程序，将加载程序传递到其他加载程序的任何组合均无法工作，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')
  }

Answer 1

您不需要通过手写笔加载器传递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');

Answer 2

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

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