I have following configurations in my webpack.config.js and package.json respectively:
var extractSCSS = new ExtractTextPlugin({filename: '[name].css', disable: false, allChunks: true});
module: {
loaders: [
{
test: /\.jsx?$/,
include: SRC_DIR,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ["react", "es2015", "stage-2"]
}
},
{
test: /\.scss$/i,
include: SRC_DIR,
exclude: /(node_modules)/,
loader: extractSCSS.extract(['css','sass'])
}
]
},
plugins: [
extractSCSS
]
and
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-beta",
"style-loader": "^0.13.1",
"webpack": "^2.2.0",
But I am not able to generate the css files. Is there something I am missing here?
EDIT
I updated the files as below:
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-beta.5",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
and
{
test: /\.css$/,
exclude: /(node_modules)/,
loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader",
publicPath: "/dist"
})
}
I have ExtractTextPlugin set up and it works, but it looks totally different from the configuration that you have. This is my configuration
module: {
rules: [
...
{
loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: [
{
loader: "css-loader"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
}),
test: /\.s(a|c)ss$/
}
...
},
plugins: [
...
new ExtractTextPlugin({
allChunks: true,
filename: "style.[contenthash].css"
})
...
]
How it works is that the loaders get called from the back to the front. So first is the sass-loader, then the postcss-loader, etc. The fallbackLoader option is used when there is no CSS which can be extracted.
Last but not least, I want to add that I don't use ExtractTextPlugin in development, since it can result in longer build times.
Edit
I forgot to include the plugins part of my configuration. And just to clarify, the dots mean that there it is a piece of my configuration. All content relevant to the question is provided.
You have to install sass-loader
npm install --save-dev sass-loader
Note that with Webpack2 you should/have to update the configuration file :
It is not possible anymore to omit the -loader extension when referencing loaders (Automatic -loader)
module.loaders is now module.rules ( webpack 2 migration guide )
chaining loaders is only supported using the legacy option module.loaders
in V2 rule.use entry specifies a loader to be used. (rule.use)
Here is extracts of my working config :
const extractCss = new ExtractTextPlugin('app.bundle.css');
add this rules :
{
test: /\.scss$/,
loader: extractCss.extract([
{ loader: 'css-loader', query: { sourceMaps: true }},
{ loader: 'sass-loader', query: { sourceMaps: true }}
])
},
and the plugin :
plugins: [
extractCss,
Not sure if this will help, but for me moving over from Browserify I had some grief with this same issue.
I didn't realise in order for the ExtractTextPlugin to produce any css, I had to include the scss in the javascript somewhere (even though it's extracting to app.bundle.css or similar) otherwise it will silently produce no output.
application.js
require('../scss/container.scss')
or
import css from '../scss/container.scss'
will result in injected <style> tags in the header in development, and an extracted app.bundle.css file in production.
Related
I am using css modules in my react application. After setting modules:true inwebpack.config.js, I am able to get css from files which I created in my src folder. I am importing some components from node-modules. But the css of components present in node-modules is not getting applied.
I also tried importing css of node-modules using import 'path'; but it didnt work.
If I set modules:false, css of node-modules is getting applied and css of files in src folder is not getting applied.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
},
}
],
},
],
},
};
This might be due to the node module you are using may not be following module syntax. I mean they might be setting classes directly with a string instead of using like style.someClassName. So, you need 2 entries in your rules 1 for your stuff and 1 for node modules.
for ex:
module.exports = {
module: {
rules: [{
test: /\.css$/,
exclude: /node_modules/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
},
}
],
}, {
test: /\.css$/,
include: /node_modules/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: false,
},
}
],
}],
},
};
I'm trying to use blueprintjs and when i'm importing its css. And i think i made something wrong in my webpack config so I see this error
there is my webpack config
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require("webpack");
var path = require("path");
module.exports={
entry: './src/index.js',
output:{
path: __dirname + "/public",
filename:'bundle.js',
publicPath: "/public/"
},
devServer: {
inline: true,
contentBase: './public',
port: 3000
},
module:{
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react', 'stage-0'],
}
},
{
test: /\.s(a|c)ss$/,
loader: ExtractTextPlugin.extract({loader: ['css-loader', 'sass-loader', 'style-loader']})
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
{
test: /\.(|gif||svg|woff|woff2|eot|ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader', options: {name: '[name].[ext]'}
}, {
test: /\.(png|jpg|)$/,
loader: 'url-loader?limit=200000'
},
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
i'm using "webpack": "^2.7.0","#blueprintjs/core": "^1.34.1" and a lot of loaders
i tried to import my css like this
require('!css-loader!./index.css');
and just like this
import styles from './index.css'
the result is the same
after extra couple hours of work i got this error
at this point i'm not sure what's wrong with my webpack and how to fix it at all
any suggestions are welcome
You can compare your webpack configuration with the one in the Blueprint monorepo: https://github.com/palantir/blueprint/tree/develop/packages/webpack-build-scripts
Try applying loaders in the same order as in the base config: ['style-loader', 'css-loader', 'sass-loader']
Try using the full path to blueprint.css inside the NPM package. The webpack error in the screenshot clearly shows the css-loader trying to load esm/index.js, a JS file, so of course it fails.
Try: #import "~#blueprintjs/core/lib/css/blueprint.css";
I am using a simple CSS based template for a ReactJS application with webpack module and not able to connect the CSS after compilation.
My webpack configuration looks like this...
var rucksack = require('rucksack-css')
var webpack = require('webpack')
var path = require('path')
module.exports = {
context: path.join(__dirname, './src'),
entry: {
css : './public/assets/css/main.css',
jsx: './index.js',
html: './public/index.html',
vendor: [
'react',
'react-dom',
'react-redux',
'react-router',
'react-router-redux',
'redux'
]
},
output: {
path: path.join(__dirname, './static'),
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.html$/,
loader: 'file?name=[name].[ext]'
},
{
test: /\.css$/,
include: /src/,
loaders: [
'style-loader',
'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
'postcss-loader'
]
},
{
test: /\.css$/,
exclude: /src/,
loader: 'style!css'
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loaders: [
'react-hot',
'babel-loader'
]
},
],
},
resolve: {
extensions: ['', '.js', '.jsx']
},
postcss: [
rucksack({
autoprefixer: true
})
],
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') }
})
],
devServer: {
contentBase: './src',
hot: true
}
}
and relative path for my css file is 'src/public/assets/css/main.css'.
Is there any way to use pure traditional CSS without changing it to the react based CSS-in-JS ?
I keep the CSS as a seprate thing, i use gulp or grunt to make things easyer then include the files as your base html
You could use the extract-text-webpack-plugin to pull your css out of your JS files. I believe the general best practice is to use the 'CSS-in-JS' (as you mentioned it) while working in development to benefit from hot-reloading. And then using the plugin above to build for production.
Also, it seems as though your config file has some redundancy.
{
test: /\.css$/,
include: /src/,
loaders: [
'style-loader',
'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
'postcss-loader'
]
},
{
test: /\.css$/, // <--- this test seems redunant. Perhaps remove it.
exclude: /src/,
loader: 'style!css'
},
I am trying to use sass-loader to convert SCSS files to css(Required to have physical file). Styles are getting applied but unable to see generated .css files .
//webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
devServer: {
contentBase: __dirname + '/public'
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{test: /\.scss$/, loader: ExtractTextPlugin.extract('css-loader!sass-loader')}
]
},
plugins: [
new ExtractTextPlugin("style.css")
]
}
Full source code is available at github repo
I've seen the source code. I'm sure it's because of you're still using webpack version 1 syntax but what you installed was webpack v2. Webpack2 has a different syntax than the previous version.
Using webpack v2 your webpack.config.js will look like this:
module: {
rules: [ // from 'loaders' to 'rules'
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.sass$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: ['style-loader','sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('bundle.css') // what the output file (css) is going to be
]
Hope this helps.
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