I just want to config Bootstrap with Webpack 4.
I use MiniCssExtractPlugin for loading css and sass.
Here is my Webpack config :
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
module.exports = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: "url?limit=5000"
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
})
]
};
I just want to add bootstrap to and use it.
Here is my index.js
import 'bootstrap/dist/css/bootstrap.css'
import "./assets/main.scss"
console.log("Hello")
When I want to run this , i got en error :
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css 7:5
Module parse failed: Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
| */
| /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
> html {
| font-family: sans-serif;
| -webkit-text-size-adjust: 100%;
# ./src/index.js 3:0-43
Is there any help ? appreciate it
Add this to your config.
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.css$/,
use: [ MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: "url?limit=5000"
}
]
},
Related
I want to use sass stylesheets that are organized with each of my react components, like this:
components/
|- componentOne
|- componentOne.js
|- componentOne.scss
|- componentTwo
|- componentTwo.js
|- componentTwo.scss
|- componentThree
|- componentThree.js
|- componentThree.scss
Are there any webpack settings / tools that will automatically load and compile all .scss files in a certain directory?
EDIT:
So the below is the current webpack config that I am using (written from a previous developer). I added in the line line in entries of SRC_DIR + "/app/components/", so that extract-text-webpack-plugin will pick up all of the .scss files in the components directory. But when I try to run the build I get the following error message. What am I doing wrong? Thanks.
ERROR in multi babel-polyfill ./src/app/index.js ./src/app/assets/stylesheets/application.scss ./src/app/components/ font-awesome/scss/font-awesome.scss react-datepicker/dist/react-datepicker.css rc-time-picker/assets/index.css react-circular-progressbar/dist/styles.css #trendmicro/react-toggle-switch/dist/react-toggle-switch.css
Module not found: Error: Can't resolve '/Users/user123/dev/project/src/app/components/' in '/Users/user123/dev/project'
# multi babel-polyfill ./src/app/index.js ./src/app/assets/stylesheets/application.scss ./src/app/components/ font-awesome/scss/font-awesome.scss react-datepicker/dist/react-datepicker.css rc-time-picker/assets/index.css react-circular-progressbar/dist/styles.css #trendmicro/react-toggle-switch/dist/react-toggle-switch.css
Webpack config:
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");
const config = {
entry: [
"babel-polyfill",
SRC_DIR + "/app/index.js",
SRC_DIR + "/app/assets/stylesheets/application.scss",
SRC_DIR + "/app/components/",
"font-awesome/scss/font-awesome.scss",
"react-datepicker/dist/react-datepicker.css",
"rc-time-picker/assets/index.css",
"react-circular-progressbar/dist/styles.css",
"#trendmicro/react-toggle-switch/dist/react-toggle-switch.css",
],
output: {
path: DIST_DIR + "/app/",
filename: "bundle.js",
publicPath: "/app/"
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
historyApiFallback: true,
hot: true,
proxy: {
'/api': {
target: 'http://localhost:5001',
secure: false,
},
}
},
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
failOnWarning: false,
failOnError: true
}
},
{
test: /\.js$/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'stage-2']
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader?importLoaders=1',
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '75-90',
speed: 3,
},
},
}],
exclude: path.resolve(__dirname, "node_modules"),
include: __dirname,
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// loader: "url?limit=10000"
use: "url-loader"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader'
},
]
},
plugins: [
new ExtractTextPlugin({
filename: "application.css",
allChunks: true
})
]
};
module.exports = config;
In order to compile your scss, webpack has to know about it. In order to let him know, you just import those scss files in your current component.
Now, what lasts you is to configure webpack. You are going to use sass-loader, css-loader and style-loader.
module.exports = {
entry: './src/',
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
}
}
This is the most basic config that can be done.
If you want to have your compiled css into files, just use Mini-css-extract-plugin
module: {
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.less$/,
loaders: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader'
]
},
},
},
resolve: {
extensions: [ '.css', '.scss'],
}
I am trying to load the Bourbon package inside my SCSS files. I am using Angular 2 and this is my webpack 3.0 config:
var path = require("path");
var webpack = require("webpack");
module.exports = {
devServer: {
contentBase: path.join(__dirname, "build"),
compress: true,
port: 9000
},
node: {
fs: 'empty'
},
cache: true,
devtool: "eval", //or cheap-module-eval-source-map
entry: {
app: path.join(__dirname, "client/app", "app.js")
},
output: {
path: path.join(__dirname, "buildf"),
filename: "ha.js",
chunkFilename: "[name].js"
},
plugins: [
//Typically you'd have plenty of other plugins here as well
new webpack.DllReferencePlugin({
context: path.join(__dirname, "client"),
manifest: require("./build/vendor-manifest.json")
}),
],
module: {
loaders: [
{
test: /\.js?$/,
loader: "babel-loader",
include: [
path.join(__dirname, "client") //important for performance!
],
exclude: [
path.join(__dirname, "node_modules")
],
query: {
cacheDirectory: true, //important for performance
plugins: ["transform-regenerator"],
presets: ["es2015", "stage-0"]
}
},
{ test: /\.(scss|sass)$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css$/, loader: 'css-loader' }
]
}
};
When I run webpack I get this error:
ERROR in
./node_modules/css-loader!./node_modules/sass-loader!./client/app/app.scss
Module build failed: #import "bourbon"; ^
File to import not found or unreadable: bourbon. Parent style sheet: stdin
in /Users/john/NG6-starter/client/app/app.scss (line 2, column 1) # ./client/app/app.scss 4:14-116 # ./client/app/app.component.js
# ./client/app/app.js # multi
(webpack)-dev-server/client?http://localhost:9000 ./client/app/app.js
webpack: Failed to compile.
Why does the bourbon component cannot be found? Here is a link to the code
June 2021 Update: In version 8.0.0 the development team of sass-loader has decided to move all SASS-related options to a sassOptions object inside options:
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
sassOptions: {
includePaths: ["node_modules/bourbon/core"],
}
}
}]
}]
}
Pre 8.0.0:
You need to pass options.includePaths to sass-loader:
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["node_modules/bourbon/core"]
}
}]
}]
}
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' },
]
}
]
}
};
Webpack generates too large a file
Webpack 2.x
Webpack experts, i now want to connect css in thejs file
How i include
import 'bootstrap/dist/css/bootstrap-theme.min.css';
import 'bootstrap-select/dist/css/bootstrap-select.min.css';
import 'bootstrap-multiselect/dist/css/bootstrap-multiselect.css';
import 'font-awesome/css/font-awesome.min.css';
import 'angular-ui-notification/dist/angular-ui-notification.min.css';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import '../css/styles.css';
import '../css/custom.css';
import '../css/max-width_767.css';
webpack config
var glob = require('glob'),
ngAnnotate = require('ng-annotate-webpack-plugin'),
ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: __dirname + '/application/application.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
plugins: [
new ngAnnotate({
add: true,
}),
new ExtractTextPlugin({
filename: '[name].css',
})
],
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['babel-preset-es2015'].map(require.resolve)
},
exclude: /(node_modules|bower_components)/
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},
node: {
fs: 'empty'
}
};
That's what i'm getting out of the way, a huge bundle.js file is probably 5 MB with all fonts, pictures, etc.
bundle.js 5.53 MB 0 [emitted] [big] main
I just want to concatenate only css and output to bundle.css
What am I doing wrong ?
You have included extract-text-plugin but you dont actually seem to be using it.
Change here:
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
To something like:
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader"
})
}
it's answer
It was necessary to look at the limit
var glob = require('glob'),
ngAnnotate = require('ng-annotate-webpack-plugin'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: __dirname + '/application/application.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
plugins: [
new ngAnnotate({
add: true,
}),
new ExtractTextPlugin('bundle.css'),
],
resolve: {
alias: {
moment: __dirname + '/node_modules/moment/min/moment'
},
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['babel-preset-es2015'].map(require.resolve)
},
exclude: /(node_modules|bower_components)/
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader',
options: {
limit: 1000
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
node: {
fs: 'empty'
},
devServer: {
historyApiFallback: true
}
};
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.*/
}
]