I'm developping a chrome extension. I use boostrap 3 for the UI.
doctype html
html
head
meta(charset='UTF-8')
title (Boilerplate Popup)
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css")
style.
body { width: 500px; }
body
#root
script(src=env == 'prod' ? '/js/ext.bundle.js' : 'http://localhost:3000/js/ext.bundle.js')
Here is how I was used to include boostrap.
localhost:3000 is a server created with webpack web server.
At this point everything works well and here is a screenshot :
But I don't want my chrome extension to be network dependant, so I decided to download boostrap using :
npm install boostrap which have downloaded boostrap 3.
I also decided to use webpack to load boostrap.min.css.
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['react-hmre']
}
}, {
test: /\.css$/,
loaders: [
'style',
'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
'postcss'
]
},
{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'}]
}
I didn't change the css loader (which comes from a boilerplate) but I added the loader for the web font and svg.
Finally, I've included boostrap.min.css in the javascript entry point :
import 'bootstrap/dist/css/bootstrap.min.css';
Now, it's how my extension look like :
I think a part of boostrap is loaded (because the link in the second version looks like the same as the links in the first version. But obviously, the other components are not loaded.
I also use react-boostrap.
Thanks
My idea in the comments is right, css?module locally load boostrap. I changed the import with :
import '!style!css!bootstrap/dist/css/bootstrap.min.css';
and it works
For WEBPACK 2, (i.e. after all the necessary dependency installs) you can include bootstrap as follows:-
Add css loaders in webpack.config.js
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1
}
}
]
}
Then, import bootstrap in the entry point script (i.e index.js or app.js, index.js in my project)
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';
Need details!!! More details here
npm install bootstrap ;
And :
Adjust css loader as following :
{
test: /\.css$/,
loaders: ['style', 'css'],
}
And, import bootstrap :
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
Related
Been trying to build a MERN app with Webpack, and can't seem to load any images in React.
React component render method:
const logo = require('./images/sample.png');
<img src={logo}'/>
Webpack
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] },
{ test: /\.css$/, use: ['style-loader','css-loader']},
{test: /\.(jpg|png|svg)$/, loader: 'url-loader'}
] }
ouputs bundle.js into src folder, file structure below
File structure
app
|......src
.........|components
....................|component.js
.........|images
....................|sample.png
It doesn't matter how I change the path in require, and even if I put the sample.png image in the same folder as component.js I get the error that it can't be resolved. I'm thinking it must be a webpack error, but no matter how many tutorials and forums I read I can't fix it.
Ideally I would dynamically load images rather than declaring specific requires like this, so if theres a better way please tell me.
UPDATE:
I changed src={logo} to src={require("${logo}")}, and no longer get a server-side error. Instead, I get an error in the developer console (using Chrome) that seems to be returning the img URI (react problem?):
Uncaught Error: Cannot find module 'data:image/png;base64...'
In your web.config.js you need
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
};
and add it here
module: {
rules: [
...
imageLoaderConfiguration,
...
],
},
Started working with webpack. In one of my css files I have an url to an svg file, but by using webpack I get 404 error when trying to load this file, tried few loaders first, second and last. Have no idea why its not working, can some one help me or give some info?
EDIT
entry: [
'./src\\main\\resources\\static\\webpack-js\\header.js'
],
output: {
path: path.join(__dirname, 'src/main/resources/static/dist'),
publicPath: '/src/main/resources/static/dist/',
filename: 'bundle.js',
libraryTarget: 'var',
library: 'EntryPoint',
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'url-loader'
},
{
test: /\.js$/,
loader: ['buble-loader'],
exclude: '/node_modules/'
}
],
}
This is my module from webpack.config.js. I am using css file that is required in header.js (entry file). Now in the css file I have lines like this
.vismaicon-menu.vismaicon-info:before {
background-image: url(/static/css/img/vismaicons/top_menu/menu_info.svg);
}
As I mentioned I tried few things to load svg files but I'm getting 404 error. And yes url is correct and files are there, it works without webpack. Everything other than svg works in css files and I get things from it.
Changed my Loaders for svg to this one and giving bigger limit solved my problem.
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url-loader?limit=1000000&mimetype=image/svg+xml"
},
Using basic web-pack configurations created by create-react-app
{
test: /\.css$/,
loader: 'style!css?importLoaders=1!postcss'
}
Installed React-FlexBox-Grid using following npm command
npm i -S react-flexbox-grid
Installed the following dependencies
npm i -D npm style-loader css-loader
It seams React-FlexBox-Grid is not picked by the web-pack loader. My question here is how to add React-FlexBox-Grid to the existing css loader configuration. From the React-FlexBox-Grid document https://github.com/roylee0704/react-flexbox-grid suggested two settings I am not sure how to
1)
{
test: /\.css$/,
loader: 'style!css?modules',
include: /flexboxgrid/,
}
{
test: /\.css$/,
loader: 'style!css!postcss',
include: path.join(__dirname, 'node_modules'), // oops, this also includes flexboxgrid
exclude: /flexboxgrid/, // so we have to exclude it
}
Not sure how to add the loader without breaking the existing working configurations.
If you already have a css loader in your webpack config I would suggest you add it as follows.
assuming your css loader looks something like this:
{test: /(\.css)$/, loaders: ['style', 'css']}
then try adding the flexbox grid loader as such:
{test: /(\.css)$/, loaders: ['style', 'css', 'style!css?modules'], include: /flexboxgrid/}
{ test: /\.css$/,
loader: "style-loader!css-loader",
exclude: __dirname + './node_modules/react-flexbox-grid',
},
{
test: /(\.scss|\.css)$/,
loader: 'style!css?modules!sass',
include: __dirname + './node_modules/react-flexbox-grid',
exclude: /(node_modules)/
},
I am using this library for slideshows called Flickity that requires to use its css file flickity.min.css. In my project I use postCSS and when including this flickity.min.css into my components css like:
#import ./lib/flickity.min
its classes get prefixed in the following way: MyComponent__flickity-class_35aw issue with this is that flickity creates new dom elements and relies on its classes, so in inspector the class for it would be .flickity-class hence no styles are applied to it, I'm trying to figure out how to include it correctly.
Using react + webpack setup
It looks like you're importing the CSS as CSS Modules. If you didn't intend to use CSS Modules you just need to remove 'modules' from your webpack config, i.e.
loaders: [
{
test: /\.css$/,
loaders: 'style!css?modules'
}
]
Should just become:
loaders: [
{
test: /\.css$/,
loaders: 'style!css'
}
]
If however you want to use CSS modules for some files but not others I would recommend defining multiple CSS loader configs based on an appropriate heuristic, e.g. assuming your /lib/ directory will only ever contain 'global' CSS you could do this:
loaders: [
{
test: /\.css$/,
exclude: /lib/,
loaders: 'style!css?modules'
},
{
test: /\.css$/,
include: /lib/,
loaders: 'style!css'
}
]
as the title suggests, basically according to the docs, with the new Babel 6 we are now supposed to pass in plugins/presets since by default it would not do anything with our code.
So I created a .babelrc file in my project directory with the following (just like in the docs)
{
"presets": ["es2015"]
}
However this would not work.
Since I'm using webpack and babel-loader, I came across a different answer that suggested to put something like this in the webpack config:
{
test: /\.js$/, exclude: /node_modules/, loader: "babel", query: {
presets: ["es2015"]
}
}
And this works.
So my question is whether this is a bug in the new Babel or there is something obviously wrong that I'm missing? I used to use Babel 5 and Webpack, and I was able to specify the babel config in .babelrc no problem...
Thanks in advance
EDIT: The problem only occurred when running the eslint loader before the babel loader. However just updated to latest babel-loader 6.2.0 and everything is working again.
module: {
preLoaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: "eslint"}
],
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel"},
{ test: /\.css$/, exclude: /node_modules/, loader: "style!css!postcss"}
It seems to be a problem with babel-loader. It should be fixed in release 6.1.0.
You can see the release/v6.1.0 summary:
* release/v6.1.0:
Update CHANGELOG.md and package.json
Set source file name relative to options.sourceRoot
Allow babelrc to be specified for cache purposes
Add BABEL_ENV || NODE_ENV to default cacheIdentifier
So updating babel-loader will suffice.