My config file currently has the following possibly relevant code:
{
// do not exclude `node_modules`
test: /\.css$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css',
{ publicPath: '../' }
)
},
{
test: /\.scss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract(
'style-loader',
['css-loader', 'postcss-loader', 'sass-loader'],
{ publicPath: '../' }
)
},
It's important that I run sass-loader first because PostCSS-loader (Autoprefixer) is unable to reach code within a #mixin that I have.
So far I've been unable to apply the relevant vendor prefix to the #mixin code being imported in. Everything works as expected if I move the #mixin code to where I #include it.
For Webpack 1 the extract function is expecting two parameters.
The first parameter will be applied when you're not extracting css to a file (fallback).
The second parameter is a list of loaders separated by an exclamation mark (!) , these loaders are applied from right to left.
ExtractTextPlugin.extract(
'style-loader',
'css-loader!postcss-loader!sass-loader'
);
For Webpack 2:
The ExtractTextPlugin is expecting a loader or an object.
ExtractTextPlugin.extract(options: loader | object)
Example:
{
test: /\.scss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: [
"css-loader",
"postcss-loader",
"sass-loader"
]
})
}
I've discovered the issue in my code. My entry-point files, where the scss files were being imported, were importing as such:
import styles from '!style-loader!css!sass!postcss-loader!./styles/styles.scss'
This was overwriting the configurations in my webpack.config files, so I simply changed all my import lines to have the correct loader order.
Related
I was previously using bootstrap css import fine previously.
However I'm trying to use CSS module so I added a few lines.
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true, //<- Added to enable css module
localIdentName: '[name]__[local]___[hash:base64:5]' //<-Added to enable css module
}
},
'postcss-loader'
]
},
Now I'm able to use the following sample codes
import styles from 'styles.css'
and use it in the code like this
<div className={styles.container}></div>
and it becomes like this in browser
<div class="styles__container___3dfEE"></div>
I have the following in my index.js
import 'bootstrap/dist/css/bootstrap.min.css';
Now, all my classes from bootstrap.min.css are no longer working.
How can i enable both css modules as well as continue to use bootstrap css normally?
I'm currently using a "dirty" way to do it, by saving my custom styles as styles.sss instead and added the following codes in webpack config. Not sure whether it will have any issues.
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader'
]
},
{
test: /\.sss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'postcss-loader'
]
}
you need to import bootstrap's css without going through your original webpack config:
import "!style-loader!css-loader!bootstrap/dist/css/bootstrap.min.css";
this will activate the style-loader and css loader but without the modules: true option
I have learnt few methods before for this Github pull-request issue.
First, change the file name. Easiest way but ugly.
Change your styles.css to styles.m.css and separate module and plain css like
//Module
test: /\.m.css$/
//Plain
test: /\^((?!\.m).)*css$/
Second, separate the folders for module and plain css, while exclude each other.
//Module
exclude: /css/plain/
//Plain
exclude: /css/module/
Third, use resourceQuery
test: /\.css$/,
oneOf: [{
resourceQuery: /^\?raw$/,
use: [...]
}
And import as
import './bootstrap.min.css?raw'
Try to separate the loaders into different rules. Like this:
{
test: /\.css$/,
use: [
'style-loader',
]
},
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
'postcss-loader'
]
}
I am using css-modules in my react application, however when I try to import outside files in .js files, I cannot import them globally because I cannot wrap them in a :global block, and webpack interprets them as styles meant to be used as objects.
How do I import CSS files as global CSS from external libraries? This is CSS that is supposed to match imported plugins.
e.g.in src/index.js
import 'draft-js/dist/Draft.css';
//cannot wrap in a :global block since it is imported
import 'react-responsive-carousel/lib/styles/carousel.min.css';
// is wrapped in a :global {...} block, so it works
import './styles/app.css';
Webpack configuration, from Create-React-App
test: /\.css$/,
loader: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
minimize: true,
},
},
'postcss-loader'
]
One option is to have two separate rules for src styles and node_modules styles and only set modules to true in your src config. It should look similar to below (I didn't test this) - the important options are include and exclude and to remove modules from the rule that applies to node_modules.
{
test: /\.css$/,
exclude: /node_modules/,
loader: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
minimize: true,
},
},
'postcss-loader'
]
},
{
test: /\.css$/,
include: /node_modules/,
loader: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
},
},
'postcss-loader'
]
}
I have a following rules defined in the webpack.config.js
rules: [
{
test: /\.svg$/,
use: ['svgr/webpack', 'url-loader']
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'resolve-url-loader',
'sass-loader'
]
},
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
plugins: ['transform-class-properties', 'transform-object-rest-spread'],
presets: ['es2015', 'react']
}
}
]
As you can see I use a svgr plugin to translate SVG images into a React components, and it works fine.
Troubles come when I want to use a SVG image as a background CSS property in .scss file.
.scss file with selector looks:
.some-name-class {
background-image: url('../images/example.svg');
}
And following output is generated when I examine element by the Chrome Dev Tool:
The issue here is that svgr/webpack tries to return a React Object, when ever it encounters a .svg file. And the same is the output you found. which has an object in the output css file. To fix this, you can use the issuer differently. Eg:
{
test: /\.svg$/,
issuer: /\.(js)x?$/,
use: ['svgr/webpack']
},
{
test: /\.svg$/,
issuer: /\.css$/,
use: ['svg-url-loader']
}
My Webpack config contains the following loaders.
module: {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
{ test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude: /node_modules/ }
]
},
Then, I wished to pull out the CSS to a separate file and I tried using the extract text webpack plugin, alternating my config like this.
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module: {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
// { test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude: /node_modules/ }
{
test: /\.sass$/,
loader: ExtractTextPlugin.extract(
{
loaders: ["css-loader", "sass-loader"],
fallbackLoader: "style-loader"
}
),
exclude: /node_modules/
}
]
},
plugins: [new ExtractTextPlugin("global.css")],...
However, it fails with. Probably due me not specifying the loaders correctly. How can I specify multiple loaders (one for SASS and one for CSS)?
Module not found: Error: Cannot resolve module '[object Object]' in C:\Source\Poc\TestProj
# ./index.js 7:14-38
I've checked the file index.js but I can't see anything wrong there. It's literally empty export, as shown below. And the reference to 7:14-38 says nothing to me. There aren't that many lines in the file, even...
import CssGlobal from "./global.sass";
//document.write("Banana!");
export default {}
This syntax for ExtractTextPlugin.extract() only works in webpack2 and above, apparently (an object as argument). Check this issue.
In order to make it work with webpack1, the syntax is:
ExtractTextPlugin.extract([notExtractLoader], loader, [options])`
notExtractLoader (optional) the loader(s) that should be used when the css is not extracted (i.e. in an additional chunk when allChunks:
false)
loader the loader(s) that should be used for converting the resource to a css exporting module.
Source: https://github.com/webpack/extract-text-webpack-plugin/blob/webpack-1/README.md
So, a working config file would be:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
/* ... */
module : {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
{
test: /\.sass$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
/* using ExtractTextPlugin.extract(["css","sass"]) works too */
}
]
},
plugins: [
new ExtractTextPlugin("styles.css")
]
}
This will genereate a styles.css file.
Loaders are transformations that are applied on a resource file of your app. They are functions (running in node.js) that take the source of a resource file as the parameter and return the new source.
For example, you can use loaders to tell webpack to load CoffeeScript or JSX.
Nicely Explained here
http://ui-codeman.blogspot.in/2017/02/webpack.html?view=sidebar
Using React with webpack.
Ran through some articles, but most of them suggest calling individual scss file for each component. But I would like to precompile all css into single file for entire application like we do using grunt/gulp.
You can use the webpack-text-extract-pluggin that is in charge of compiling all css files and bundling them in an index.css file.
Also note that you'll need to install sass-loader too in order to compile the scss.
In the webpack config:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
config = {
...,
plugins: [
...,
new ExtractTextPlugin('index.css')
],
module: {
loaders: [
...
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style','css')
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css!sass')
}
]
}
}
In index.html:
<link rel="stylesheet" type="text/css" href="/index.css">
In any Javascript file that gets through webpack:
require("./styles/my-custom-file.scss");
You could take a look at the extract-text-webpack-plugin.
After requiring this in your webpack.config.js:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
You can rewrite your sass loader to this:
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css', 'sass')}
]
},
plugins: [
new ExtractTextPlugin('bundle.css')
]
For more options and usage check the link above.