Webpack bootstrap.css npm 模块无法使用 ExtractTextLoader + css_loader 进行解析

Question

我正在学习使用节点作为前端构建工具，并且正在努力将 bootstrap 包含到 css 捆绑文件中以包含在网页中。

我有一个用于 LESS 的加载器和一个用于 CSS 的加载器，以及一个用于 FONTS 的加载器，并且需要任何来自我自己的来源的加载器似乎都能正常地将 CSS 翻译到我的包中文件，但只要我

require('bootstrap/dist/css/bootstrap.css')

或

require('../../node_modules/bootstrap/dist/css/bootstrap.css')

我在 webpack 中遇到以下错误：

ERROR in ./~/bootstrap/dist/css/bootstrap.css?root=/~/bootstrap/dist/
Module parse failed: <my project root>/node_modules/bootstrap/dist/css/bootstrap.css?root=/node_modules/bootstrap/dist/ Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:5)

我从包里查了bootstrap.css，第7行，char5好像是文件中html和{第一个css规则之间的“”space在完全有效的块注释之后 CSS...？我什至可以将该文件的全部内容复制到我的一个本地源文件 (common/style.less) 中，它会很好地解析并包含在包中。我根本无法从 node_modules 位置包含它。为什么？

我的 app.js 入口点如下所示：

import 'babel-polyfill';

// common frameworks
require('expose?$!jquery');
require('expose?jQuery!jquery');
require('bootstrap/dist/js/bootstrap.js');

// common styles
require('bootstrap/dist/css/bootstrap.css');
require('./common/style.less');

// common images
var images = require.context('./common/images/', true, /.*\.(png|gif|bmp|jpg|jpeg|ico)$/);
images.keys().forEach(images);

// modules
require('./modules/landing');

webpack.config.js:

const webpack = require('webpack');
var path = require('path');
var minimize = process.argv.indexOf('--minimize') !== -1;
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var CssBundler = new ExtractTextPlugin('[name].css', {
  allChunks: true
});

var BUILD_DIR = path.resolve(__dirname, '../webroot/assets');
var APP_DIR = path.resolve(__dirname, './src');

config = {
  entry: {
    'camo' : APP_DIR + '/Camo/index',
    'frontend': APP_DIR + '/Frontend/index'
  },
  output: {
    path: BUILD_DIR,
    publicPath: '/assets/',
    filename: '[name].bundle.js'
  },
  module: {
    loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'imports?this=>window!babel-loader'
    },
    {
      test: /\.css$/,
      include: APP_DIR,
      loader: CssBundler.extract("style-loader", "css-loader")
    },
    {
      test: /\.less/,
      include: APP_DIR,
      loader: CssBundler.extract("style-loader", "css-loader!less-loader")
    },
    {
      test: /\.(png|jpg|gif|bmp|ico)$/,
      include: APP_DIR,
      loader: 'url-loader?limit=8192!file?name=/images/[name].[ext]'  // inline base64 URLs for <=8k images, direct URLs for the rest]
    },
    {
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      loader: 'file?name=/fonts/[name].[ext]'
    },
    {
      test: /\.handlebars$/,
      loader: "handlebars-loader"
    }]
  },
  plugins: [
    CssBundler
  ]
};

if (minimize) {
  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      output: {
        comments: false
      }
    })
  )
}

module.exports = config;

Answer 1

我终于解决了这个问题。注意我的 INCLUDE 路径。对于 css，它仅包含我的 /src 文件夹，该文件夹本质上不包括 node_modules，因为它是它的同级文件夹。如果我将 css 的包含更改为应用程序根目录，则正确的加载程序会处理 bootstrap.css 的 css 并且它会正确构建！哇

Webpack bootstrap.css npm 模块无法使用 ExtractTextLoader + css_loader 进行解析

Webpack bootstrap.css npm module fails parsing with ExtractTextLoader + css_loader

css

frontend

twitter-bootstrap-3

webpack

css-loader