The PNGs files works fine:
.marker {
background: url(../assets/marker.png)
But when I change them to an SVG background:
.marker {
background: url(../assets/marker.svg)
I get this: error on line 1 at column 1: Document is empty. In other words, Webpack can't find the path of the SVG file, generating something like this: data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICIyOWE3OGMyODg0ZWQyNjFhYTFjOWM1MjYxY2I1MTViZi5zdmciOw==
It does work when I use an absolute path:
.marker {
background: url(http://istaging.co/api/marker.svg)
Why is this?
Note: this is now my Webpack file looks like:
var path = require('path')
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, '../dist/static'),
publicPath: '/static/',
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.vue', 'styl'],
alias: {
'src': path.resolve(__dirname, '../src')
}
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
exclude: /node_modules/
}
],
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url',
query: {
limit: 10000,
name: '[name].[ext]?[hash:7]'
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
}
]
},
eslint: {
formatter: require('eslint-friendly-formatter')
}
}
(Do I have to change something here to make SVG files work in CSS backgrounds?)
I would suggest using inline-svg-loader instead of file-loader for svg files.
Related
I have a webpack config file(version 5.28.0) that I am trying to alter, in order to create two versions of the user.js file that is generated. I'd like a user.js and legacy_user.js file to be generated. Both files I would like to be generated from the contents of the 'scripts/user' directory, with the exception of I'd like the user.js file to compile excluding the legacy_user.js file that is in the 'scripts/user' directory and the legacy_user.js file to compile excluding the user.js file that is in the 'scripts/user' directory. I have tried the below but the contents of the user.js file keeps overwriting the contents of the legacy_user.js file and they end up being identical:
module.exports = (options = {}) => {
return [
{
mode: options.production ? 'production' : 'development',
entry: {
app: path.resolve(__dirname, 'scripts/app'),
user: path.resolve(__dirname, 'scripts/user'),
'video/trim': path.resolve(__dirname, 'scripts/video/trim')
},
output: { path: path.resolve(__dirname, '../public_html/dist') },
module: {
rules: [
{
test: /\.js$/,
exclude: [/(node_modules)/, /legacy_user\.js$/],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['#babel/plugin-transform-runtime']
}
}
}, {
test: /\.(s[ac]ss|css)$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{ test: /\.(png|jpg|woff(2)?|ttf|eot|svg)$/, loader: 'file-loader' }
]
},
},
{
mode: options.production ? 'production' : 'development',
entry: {
legacy_user: path.resolve(__dirname, 'scripts/user')
},
output: {
path: path.resolve(__dirname, '../public_html/dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: [/(node_modules)/, /user\.js$/],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['#babel/plugin-transform-runtime']
}
}
}, {
test: /\.(s[ac]ss|css)$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{ test: /\.(png|jpg|woff(2)?|ttf|eot|svg)$/, loader: 'file-loader' }
]
},
}
]
}
Any help on this would be greatly appreciated!
I have defined following method in a Vue page:
getIsoCountryCode: function(country){
console.log(countries);
return "flag-icon-" + countries.getAlpha2Code(country, 'en');
}
The function returns flag-icon-undefined, even though it works when I test it outside the Vue/Webpack environment.
Webpack config:
const { VueLoaderPlugin } = require("vue-loader");
const path = require("path");
module.exports = {
entry: "./lib/team-page/team.js",
devtool: "source-map",
watch: true,
resolve: {
alias: {
flag_icon_css: __dirname + "/node_modules/flag-icon-css/css/flag-icon.css"
}
},
output: {
path: path.resolve(__dirname, "public/lib"),
filename: "team.js"
},
mode: "development",
module: {
rules: [{
type: 'javascript/auto',
test: /\.(json|html)/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'file-loader',
options: { name: '[name].[ext]' },
}]
},
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.scss$/,
use: [
{loader: "style-loader"},
{
loader: "css-loader"
},
{
loader: "sass-loader"
}
]
},
{
test: /\.css$/,
use: [
{loader: "style-loader"},
{
loader: "css-loader"
}
]
},
{
test: /\.js$/,
loader: "babel-loader"
},
{
test: /\.svg$/,
loader: 'file-loader',
options: {
name: '../assets/flags/[name].[ext]'
}
}
]
},
plugins: [new VueLoaderPlugin()]
};
I checked in the debugger, and found this piece of code in the Webpack-compiled file:
var codes = __webpack_require__(/*! ./codes.json */ "./node_modules/i18n-iso-countries/codes.json");
It still points to the node_modules folder, even though I would have expected it to be in the bundle. (Edit: this doesn't seem to matter, axios is defined in the same way and that works as expected.)
I added the rule suggested here to my config file, but it still doesn't work.
Edit: to get it to work, you have to register the locale first. For English: countries.registerLocale(require("i18n-iso-countries/langs/en.json"));
Why am I receiving this error? I also have bootstrap files being imported into the main custom.scss file. Not sure if this is creating any issues?
I'm receiving this error when attempting to use the scss loader in
webpack:
Unexpected character '#' (4:0)
You may need an appropriate loader to handle this file type.
|
|
| #import "_bootstrap";
| #import "spinner";
| #import "navigations";
# ./js/app.js 5:0-30
Here is my webpack.config.js script:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './js/app.js',
output: {
path: __dirname,
filename: 'js/bundle.js'
},
watch: true,
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
//test: /\.(png|jpg)$/,
use: 'file-loader'
}
],
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /.scss?$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
},
};
Here is my require script located in my app.js file:
require('../scss/custom.scss');
I believe you need to move the loader rule into module:
module.exports = {
entry: './js/app.js',
output: {
path: __dirname,
filename: 'js/bundle.js'
},
watch: true,
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
//test: /\.(png|jpg)$/,
use: 'file-loader'
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss?$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
}
};
If that doesn't work, you can try the use to specify the loaders:
module.exports = {
module: {
rules: [
{
test: /\.scss?$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
]
}
]
}
};
When running webpack-dev-server produces an error
Module build failed: TypeError: text.forEach is not a function
enter image description here
'use strict';
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: {
app: ['./client/main.js'],
index: ['./server/index.pug']
},
output: {
path: path.resolve(__dirname, "..", "public",'js'),
publicPath: "/js/",
filename: '[name].js'
},
module: {
rules: [
{
test: /\.pug$/,
loader: ExtractTextPlugin.extract( 'pug-loader')
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader"
}, {
loader: "postcss-loader"
}, {
loader: "sass-loader"
}]
})
},
{
test: /\.vue$/,
loader: "vue-loader"
}
]
},
resolve: {
extensions: [".vue", ".js", ".json",".pug",".html"],
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
plugins: [
new ExtractTextPlugin("[name].html"),
new ExtractTextPlugin("[name].css"),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "main",
minChunks: 2
})
],
}
Before that, I tried to do it through HtmlWebpackPlugin but there it returned plain text!
This is my current webpack.production.config.js file:
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src_react/app/app.jsx',
output: {
path: __dirname + '/build',
filename: '[name]-[hash].js'
},
module: {
loaders: [
{
test: [/\.jsx?$/, /\.js?$/],
exclude: /(node_modules|bower_components)/,
loader: 'babel'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
'style', 'css', 'resolve-url', 'sass?sourceMap'
)
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
},
{
test: /\.png$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.jpg$/,
loader: 'file-loader'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
},
{
test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx', '.css', '.scss'],
alias: {
'ie': 'component-ie'
}
},
postcss: [
require('autoprefixer')
],
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/src_react/index.tmpl.html'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin('[name]-[hash].css')
]
};
This does not work. The following is my webpack.config.js file used during development which seems to work fine:
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src_react/app/app.jsx',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
devtool: 'source-map',
devServer: {
colors: true,
inline: true
},
module: {
loaders: [
{
test: [/\.jsx?$/, /\.js?$/],
exclude: /(node_modules|bower_components)/,
loader: 'babel'
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.png$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.jpg$/,
loader: 'file-loader'
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
},
{
test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx', '.css', '.scss'],
alias: {
'ie': 'component-ie'
}
},
postcss: [
require('autoprefixer')
],
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/src_react/index.tmpl.html"
}),
new webpack.HotModuleReplacementPlugin()
],
watch: true
};
The main difference between the two files is that the production one attempts to use the ExtractTextPlugin but whenever I run the production config with the command webpack -p --config ./webpack.production.config.js
I get errors like the following:
ERROR in ./~/css-loader!./src_react/app/roles/components/job-button/JobButton.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../../../../sass/variables in /Users/Aaron/Documents/src_react/app/roles/components/job-button
# ./~/css-loader!./src_react/app/roles/components/job-button/JobButton.scss 3:10-99
Why does it try to look for my _variables.scss file inside the wrong folder? It works perfectly fine running the development config.
After following Juho's recommendation to change the way I use extract text plugin to ExtractTextPlugin.extract('style','css!resolve-url!sass?sourceMap') I get this error instead:
ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module build failed: ReferenceError: window is not defined