0

我正在学习使用 node 作为前端构建工具，并且正在努力将引导程序包含到 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 规则之间的“”空间，这是一个完全有效的 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;
4

1 回答 1

0

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

于 2016-08-12T02:12:40.117 回答