I'm trying to compile all my .scss files but webpack doesn't seem to be doing it, even though I've declared style-loader & sass-loader in my webpack config file.
I don't see why the .scss files wouldn't compile? I've followed a guide from the following blog: http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html
Loaders:
loaders: [
// Working loaders...
{test: /\.json$/, loaders: ["json"]},
{test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/, loaders: ["file?context=static&name=/[path][name].[ext]"], exclude: /node_modules/},
{test: /\.js$/, loaders: ["babel?presets[]=es2015&presets[]=stage-0&presets[]=react"], exclude: /node_modules/},
// Non working loaders...
// ALSO TRIED THIS -> { test: /\.scss$/,loader: ExtractTextPlugin.extract( "style", 'css!sass')}
{ test: /\.css$/, loader: ExtractTextPlugin.extract(
"style-loader",
"sass-loader?sourceMap",
{
publicPath: "../dist"
}
)},
],
style.css is never generated anywhere.
Plugins:
plugins: [
new ExtractTextPlugin("style.css", {
disable: false,
allChunks: true
}),
]
Also tried:
The following was copied from the blog I linked above.
Loaders:
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}
Plugins:
new ExtractTextPlugin('public/style.css', {
allChunks: true
})
Other webpack configs:
Here are my other configurations. Pretty standard and do the job for everything except the .scss!
target: "node",
cache: false,
context: __dirname,
debug: false,
devtool: "source-map",
entry: ["../src/server"],
output: {
path: path.join(__dirname, "../dist"),
filename: "server.js"
},
externals: [nodeExternals({
whitelist: ["webpack/hot/poll?1000"]
})],
resolve: {
modulesDirectories: [
"src",
"src/components",
"src/containers",
"node_modules",
"static"
],
extensions: ["", ".json", ".js"]
},
node: {
__dirname: true,
fs: "empty"
}
Here is what my webpack terminal is printing out after I run it:
Waiting for dist/*.js (max 30 seconds)
[2] http://localhost:8080/webpack-dev-server/
[2] webpack result is served from http://localhost:8080/dist
[2] content is served from /Users/james/apps/react-server-side/server
[0] Ready. dist/*.js changed
[1] Hash: 12a5c90bd2564cd8880d
[1] Version: webpack 1.12.14
[1] Time: 15448ms
[1] Asset Size Chunks Chunk Names
[1] server.js 1.37 MB 0 [emitted] main
[1] server.js.map 1.23 MB 0 [emitted] main
[1] [0] multi main 40 bytes {0} [built]
[1] + 659 hidden modules
Does anyone have any ideas to what is going on?!
Edit
Forgot to add that I'm doing this server side!
Are you requiring the scss files in your js files? You have to do that.
Also, you don't need the ExtractTextPlugin, a config as the following should work:
loaders: [
// ...
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
Related
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.
I'm using webpack in my project. I'm trying to use toastr
Toastr css file uses base64 in url like the following:
#toast-container > .toast-success {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;}
The following is my webpack configuration:
'use strict'
var webpack = require('webpack');
var path = require('path');
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'./modules/index.js'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
noParse: [
/aws\-sdk/,
],
loaders: [{
test: /\.css$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'public/stylesheet'),
loader: extractTextWebpackPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.js$/,
exclude: /node_modules/,
include: __dirname,
loaders: ['babel']
},
{
test: /\.(png|jpg|svg)$/,
exclude: /node_modules/,
loader: 'url-loader?limit=2000',
include: [
path.resolve(__dirname, 'public')
]
}
]
},
plugins: [
new extractTextWebpackPlugin("styles.css")
]
}
When I run webpack in terminal I get the error
ERROR in ./~/toastr/build/toastr.css
Module parse failed: /Users/Admin/Downloads/kamal/development/client-app/node_modules/toastr/build/toastr.css Unexpected token (1:0)
How can I process base64 url with webpack?
This problem is solved.
I was excluding node_modules. Since the css-loader is configured to exclude node_modules, it was not able to process the toastr.css file. Just eliminate the exclude: /node_modules/.
The correct configuration in this case is the following:
loaders: [{
test: /\.css$/,
include: path.resolve(__dirname, 'public/stylesheet'),
loader: extractTextWebpackPlugin.extract('style-loader', 'css-loader')
},
I'm trying to use things like font-awesome and foundation with React and css modules but I can't figure it out how to import them into my project properly.
Note that I'm using HotModuleReplacementPlugin and ExtractTextPlugin to get a single css file.
Somewhere in the top-level component's css file I'd like to be able to just do #import 'font-awesome'; but how can I do it so that the file will be treated as-is and the classes won't end up localised to font_awesome__fa-check and such?
This is my webpack config:
var paths = {
app: path.join(__dirname, './app/'),
dist: path.join(__dirname, './dist/'),
external: path.join(__dirname, './node_modules/'),
}
module.exports = {
entry: {
site: [
'webpack-dev-server/client?http://localhost:5000',
'webpack/hot/dev-server',
path.join(paths.app, '/index.js'),
]
},
output: {
path: paths.dist,
publicPath: '/',
filename: 'scripts/[name].[hash].js',
chunkFilename: '[name].[chunkhash].js'
},
resolve: {
extensions: ['', '.js'],
root: paths.app,
alias: {
'font-awesome.css': path.join(paths.external, '/font-awesome/css/font-awesome.min.css')
}
},
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: ['babel'],
include: path.join(__dirname, 'app')
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&localIdentName=[name]__[local]&importLoaders=1', 'postcss-loader')
}
]
},
postcss: [
require('autoprefixer-core'),
],
devtool: 'inline-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin("styles/[name].[chunkhash].css", {allChunks: true}),
new HtmlWebpackPlugin({
template: path.join(paths.app, '/site.html'),
filename: 'index.html',
inject: 'body',
chunks: ['site']
}),
]
};
Thanks.
You could leverage include / exclude option when configuring loaders.
E.g. given that all of your custom css is somewhere in the /app/ directory, while foundation and font-awesome are not.
...
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&localIdentName=[name]__[local]&importLoaders=1', 'postcss-loader'),
include: path.join(__dirname, 'app')
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader!css-loader'),
exclude: path.join(__dirname, 'app')
}
]
},
Another option is to use different extension for the files that use css-modules syntax. You could use .mcss.
...
module: {
loaders: [
{
test: /\.mcss$/,
loader: 'css-loader?modules&localIdentName=[name]__[local]&importLoaders=1'
},
{
test: /\.css$/,
loader: 'css-loader')
}
],
postLoaders: [
{
test: /\.(css|mcss)$/,
loader: ExtractTextPlugin.extract('style-loader')
}
]
},