javascript - Webpack 和外部( vendor ).css

Question

我正在慢慢地将 Webpack 引入到现有元素中。此时我们不会要求 .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');