Webpack bootstrap config issue - module parse failed, You may need an appropriate loader to handle this file type
iamdeadman opened this issue · 0 comments
iamdeadman commented
Hi, I am trying to include bootstrap in webpack config with bootstrap-loader here and facing a strange issue -
ERROR in ./front/assets/styles/_bootstrap.yml
Module parse failed: /home/ubuntu/services/front/assets/styles/_bootstrap.yml Unexpected character '#' (2:0)
You may need an appropriate loader to handle this file type.
| ---
| # Output debugging info
| # loglevel: debug
|
This is the webpack configuration that I am using currently -
var path = require('path');
var webpack = require('webpack');
var CleanWebpackPlugin;
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var output = 'static/dist';
var manifest = path.join(output, 'manifest.json');
var build_production = (process.env.NODE_ENV === 'production');
var build_dll_bundle = !build_production && (process.env.BUILD_DLL === 'yes');
var build_dll_consumer = !build_production && !build_dll_bundle;
var bootstrapEntryPoint = 'bootstrap-loader/lib/bootstrap.loader?' +
'configFilePath='+path.join(__dirname, '/front/assets/styles/_bootstrap.yml') +
'!bootstrap-loader/no-op.js';
var dll_entry = [
'font-awesome-loader',
bootstrapEntryPoint,
'./front/dll_bundle/dll_common.js',
'./front/dll_bundle/dll_dt.js'
]
var entry = {
common: ['font-awesome-loader', bootstrapEntryPoint, './front/dll_bundle/dll_common.js', './front/common.js'],
service: './front/service.js',
billing: './front/billing.js',
customer: './front/customer.js',
deployment: './front/deployment.js',
dt: ['./front/dll_bundle/dll_dt.js', './front/dt.js']
};
if (build_production) {
console.log("Building for production");
}
if (build_dll_bundle) {
console.log("Building dll bundle for development");
entry = {
dll_bundle: dll_entry
}
}
if (build_dll_consumer) {
console.log("Building dll consumer for development");
entry['common'] = './front/common.js';
entry['dt'] = './front/dt.js';
}
module.exports = {
entry: entry,
output: {
path: path.join(__dirname, output),
publicPath: '/static/dist/',
filename: '[name].[chunkhash].js',
chunkFilename: '[id].[chunkhash].js'
},
plugins: [
],
module: {
rules: [
{
test: /\.(woff2?|ttf|eot|otf|webp|svg|png|jpg|gif|ico)(\?.*)?$/,
loader: 'file-loader',
query: {
name: 'media/[name].[hash:20].[ext]'
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
})
}
}
},
{
test: /datatables\.net.*/,
loader: 'imports-loader?define=>false'
},
{
test:/bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/,
loader: 'imports-loader?jQuery=jquery'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: 'cacheDirectory'
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.scss$/,
exclude: [
'/.*themify-icons\.scss/'
],
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: require.resolve('jquery'),
use: [
{
loader: 'expose-loader',
query: 'jQuery'
},
{
loader: 'expose-loader',
query: '$'
}
]
},
{
test: require.resolve('moment'),
use: [
{
loader: 'expose-loader',
query: 'moment'
}
]
}
],
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
}
if (build_production || build_dll_bundle)
CleanWebpackPlugin = require('clean-webpack-plugin')
if (!build_dll_bundle) {
var ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');
var CleanManifestPlugin = require('webpack-clean-manifest-plugin').default;
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
module.exports.plugins = (module.exports.plugins || []).concat([
// manifest file generator
new ManifestRevisionPlugin(manifest, {
rootAssetPath: './front',
ignorePaths: ['./front/assets', './front/dll_bundle'],
format: function (data, parsedAssets) {
var Format = require('manifest-revision-webpack-plugin/format');
var format = new Format(data, parsedAssets);
var output = format.general();
return output.assets;
}
}),
new CleanManifestPlugin(output, {
manifest: manifest,
exclude: /manifest.json|media|dll/
}),
// share common code between the pages
new CommonsChunkPlugin({
filename: "common.[chunkhash].js",
name: "common",
}),
new ExtractTextPlugin({
filename: 'styles/[name].[hash].css',
allChunks: true
})
]);
}
if (build_dll_bundle) {
// dll/dll_bundle.js
module.exports.output.filename = 'dll/[name].js';
module.exports.plugins = (module.exports.plugins || []).concat([
// clean static/dist/media
new CleanWebpackPlugin([path.join(output, 'media')]),
// dll/dll_bundle.css
new ExtractTextPlugin({
filename: 'dll/[name].css',
allChunks: true
}),
/*
// we are using simple entry, not a library!
new webpack.DllPlugin({
// The manifest we will use to reference the libraries
path: path.join(__dirname, output, 'dll/[name]-manifest.json'),
name: '[name]_[hash]'
})
*/
])
// module.exports.output.library = '[name]_[hash]';
}
if (build_dll_consumer) {
module.exports.plugins = (module.exports.plugins || []).concat([
//new webpack.PrefetchPlugin('./front/assets/styles/service.scss'),
//new webpack.PrefetchPlugin('./front/assets/styles/customer.scss'),
//new webpack.PrefetchPlugin('./front/assets/styles/dt.scss'),
/*
// we are using simple entry, not a library!
new webpack.DllReferencePlugin({
manifest: require(path.join(__dirname, output, 'dll/dll_bundle-manifest.json'))
})
*/
])
}
if (!build_production) {
module.exports.devtool = 'eval'
}
if (build_production) {
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports.devtool = 'cheap-module-source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
// clean static/dist
new CleanWebpackPlugin([output]),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
output: {
comments: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorOptions: {
zindex: false
},
canPrint: true
})
])
}
and this is the bootstrap.yml config that I am using with webpack build -
---
# Output debugging info
# loglevel: debug
# Major version of Bootstrap: 3 or 4
bootstrapVersion: 3
# If Bootstrap version 3 is used - turn on/off custom icon font path
useCustomIconFontPath: false
# Webpack loaders, order matters
styleLoaders:
- style-loader
- css-loader
- sass-loader
# Extract styles to stand-alone css file
# Different settings for different environments can be used,
# It depends on value of NODE_ENV environment variable
# This param can also be set in webpack config:
# entry: 'bootstrap-loader/extractStyles'
extractStyles: true
# env:
# development:
# extractStyles: false
# production:
# extractStyles: true
# Customize Bootstrap variables that get imported before the original Bootstrap variables.
# Thus, derived Bootstrap variables can depend on values from here.
# See the Bootstrap _variables.scss file for examples of derived Bootstrap variables.
#
preBootstrapCustomizations: ./_bootstrap-pre.scss
# This gets loaded after bootstrap/variables is loaded
# Thus, you may customize Bootstrap variables
# based on the values established in the Bootstrap _variables.scss file
#
bootstrapCustomizations: ./_bootstrap-post.scss
# Import your custom styles here
# Usually this endpoint-file contains list of @imports of your application styles
#
appStyles: ./app.scss
### Bootstrap styles
styles:
# Mixins
mixins: true
# Reset and dependencies
normalize: true
print: true
glyphicons: true
# Core CSS
scaffolding: true
type: true
code: true
grid: true
tables: true
forms: true
buttons: true
# Components
component-animations: true
dropdowns: true
button-groups: true
input-groups: true
navs: true
navbar: true
breadcrumbs: true
pagination: true
pager: true
labels: true
badges: true
jumbotron: true
thumbnails: true
alerts: true
progress-bars: true
media: true
list-group: true
panels: true
wells: true
responsive-embed: true
close: true
# Components w/ JavaScript
modals: true
tooltip: true
popovers: true
carousel: true
# Utility classes
utilities: true
responsive-utilities: true
### Bootstrap scripts
scripts:
transition: true
alert: true
button: true
carousel: true
collapse: true
dropdown: true
modal: true
tooltip: true
popover: true
scrollspy: true
tab: true
affix: true
now even when I strip out all the comments from this config file I still get this error -
ERROR in ./front/assets/styles/_bootstrap.yml
Module parse failed: /home/harshit/Desktop/current/roman-billing-app/services/front/assets/styles/_bootstrap.yml Unexpected token (12:28)
You may need an appropriate loader to handle this file type.
| extractStyles: true
|
| preBootstrapCustomizations: ./_bootstrap-pre.scss
|
| bootstrapCustomizations: ./_bootstrap-post.scss
Child extract-text-webpack-plugin:
So, can someone please help me find out what am I missing in the config here or how to resolve this issue ? Please let me know if there is any more information I can provide in order to help debug / resolve this issue.