0

ノードをフロント エンド ビルド ツールとして使用する方法を学んでおり、ブートストラップを CSS バンドル ファイルに含めて Web ページに含めるのに苦労しています。

私は 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 は、完全に有効な CSS であるブロック コメントの後の、ファイル内の html と { 最初の css ルールの間の " " スペースのようです... ? そのファイルのコンテンツ全体をローカル ソース ファイル (common/style.less) の 1 つにコピーすることもできます。これは問題なく解析され、バンドルに含まれます。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 に答える