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' },
]
}
]
}
};
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!
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!
I have this webpack config
var Webpack = require("webpack");
var Path = require("path");
var OutputPath = "build";
module.exports = {
entry: "./src/app.tsx",
output: {
path: Path.join(__dirname, OutputPath, "" + process.env.NODE_ENV),
publicPath: "",
filename: "bundle.js"
},
devtool: "source-map",
devServer: {
contentBase: OutputPath
},
resolve: {
extensions: ["", ".ts", ".tsx", ".webpack.js", ".web.js", ".js", ".html"],
alias: {
jquery: "jquery/src/jquery"
}
},
node: {
fs: "empty"
},
module: {
loaders: [
{ test: /\.tsx?$/, loader: "ts-loader" },
{ test: /\.html$/, loader: "html-loader!file-loader?name=[name].[ext]" },
{ test: /\.ejs$/, loader: "ejs-loader" },
{
test: /\.svg$/,
loaders: [
"url-loader?limit=100000&name=assets/[name].[hash].[ext]",
"image-webpack?bypassOnDebug=false&optimizationLevel=7&interlaced=false"
]
},
{
test: /\.(png|jpe?g|gif|woff|woff2|ttf|eot|ico)$/,
loader: "url-loader?limit=100000&name=assets/[name].[hash].[ext]"
},
,
{
test: /\.css$/,
exclude: /.*onsenui.*$/,
loader: "ignore-loader"
}
,
{
test: /\.(less|css)$/,
exclude: /.*(font_awesome|ionicons|iconic-font).*$/,
loader: "style-loader!css-loader?-import!less-loader!postcss-loader"
}
],
}
};
Application is built on onsenui and I am trying to ignore specific filename from css import.
#import url("font_awesome/css/font-awesome.min.css");
#import url("ionicons/css/ionicons.min.css");
#import url("material-design-iconic-font/css/material-design-iconic-font.min.css");
...
We can comment out the specific lines, but we don't want to do it every update npm packages.
Does anyone know, how to ignore that css imports?
Finally I just installed "string-replace-webpack-plugin" and use this way.
var StringReplacePlugin = require("string-replace-webpack-plugin");
Then adding that plugin into preloader does the work
preLoaders: [
{
test: /onsenui\.css$/,
loader: StringReplacePlugin.replace({
replacements: [
{
pattern: /.*(#import).*/ig,
replacement: function (match, p1, offset, string) {
return "/*/";
}
}
]}),
include: /node_modules\\onsenui.*/
}
]
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
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.