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',
    ],
  },
  /* … */
};

Webpack和外部（供应商）.css

2 个答案: