0
ノードをフロントエンドビルドツールとして使用することを学び、ブートストラップをCSSのバンドルファイルに含めてWebページに組み込むのに苦労しています。Webpack bootstrap.css npmモジュールがExtractTextLoader + css_loaderで解析できない
できるだけ早く私
として、私は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をチェックアウトしました.Line7、char5は、HTMLとCSS間のスペースのようですが、完全に有効な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;