I'm building an app using webpack, babel, and Sass. Everything working fine but sass file not compiling css file even though it's not throwing any errors.
My Packages related to this are:
"webpack": "^3.10.0",
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"glob-all": "^3.1.0",
"node-sass": "^4.7.2",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"sass-loader": "^6.0.6"
webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const glob = require('glob-all');
var PurifyCSSPlugin= require('purifycss-webpack');
module.exports = {
entry: './src/js/index.js',
output: {
path: __dirname,
filename: 'dist/js/bundle.js'
},
watch: true,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'stage-3'],
}
}
},
{
test:/\.css$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
url: false
}
}
]
})
},
{
test:/\.scss$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
url: false
}
},
'sass-loader'
]
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: './dist/css/styles.css'
}),
new PurifyCSSPlugin({
paths: glob.sync([
path.join(__dirname, 'dist/index.html'),
path.join(__dirname, 'src/js/*.js')
])
})
]
}
Files Directory:
This is my project Files Directory
test:/\.scss$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: ['style-loader', 'css-loader', 'sass-loader']
options: {
url: false
}
},
]
})
Related
In App.js I wanted to import App.css file or any css file. import './App.css' is not working here and giving error " ERROR in ./src/shared/App.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders "
Directory Structure -
1. public
- bundle.js
2. src
- browser (folder) > index.js
- server (folder) > index.js
- server (folder) > App.js , App.css
This is my webpack.config.js file -
var path = require('path')
var webpack = require('webpack')
var nodeExternals = require('webpack-node-externals')
var combineLoaders = require('webpack-combine-loaders');
var browserConfig = {
entry: './src/browser/index.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{ test: /\.(js)$/, exclude: /node_modules/, use: ['babel-loader']},
{
test: /\.css$/,
exclude: /node_modules/,
loader: combineLoaders([
{
loader: 'style-loader'
}, {
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
])
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx', '.css']
},
mode: 'production',
plugins: [
new webpack.DefinePlugin({
__isBrowser__: "true"
})
]
}
var serverConfig = {
entry: './src/server/index.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: __dirname,
filename: 'server.js',
publicPath: '/'
},
mode: 'production',
module: {
rules: [
{ test: /\.(js)$/, exclude: /node_modules/, use: ['babel-loader']},
{
test: /\.css$/,
exclude: /node_modules/,
loader: combineLoaders([
{
loader: 'style-loader'
}, {
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
])
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx', '.css']
},
plugins: [
new webpack.DefinePlugin({
__isBrowser__: "false"
})
]
}
module.exports = [browserConfig, serverConfig]
To load CSS files in your ReactJS project, install the css-loader for ReactJS...
npm install --save-dev style-loader css-loader
Also, make sure to modify your webpack.config.js file, located in my project at: ./node_modules/webpack-dev-server/client/webpack.config.js. You'll need to add loaders, which will look something like...
module.exports = {
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loaders: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } },
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
...
}
Finally, make sure you have a resolution rule for CSS in webpack.config.js...
resolve: {
extensions: ['', '.js', '.css',...]
}
I've written the webpackconfig but css doesn't seem to work properly and it is throwing and error. Following are my file's contains.
My webpack.config.js:
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
}
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
}
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}
]
},
plugins: [
new ExtractTextPlugin("style.css", {
allChunks: true
})
]
};
and in my Index.js I've added as :
import '../assets/css/style.css';
Package.json :
{
...
"dependencies": {...
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3",
"css-loader": "^0.28.7",
"style-loader": "^0.19.0"
}
}
As per our chat, this is what your webpack.config.js file is as below:
var path = require("path");
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
}
{
test: /\.css$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("css-loader!sass-loader")
}
]
},
plugins: [
new ExtractTextPlugin("src/components/assets/css/style.css", {
allChunks: true
})
]
};
module.exports = config;
There are two issues with this config.
The are no commas separating the loaders objects.
You are using ExtractTextPlugin but have not imported/required it anywhere in the config.
Issue #1 is quite obvious how to solve; simply add the commas after each definition of a loader object.
Issue #2 as well, you need to install and reference ExtractTextPlugin in you webpack config file.
You can do so by running the following command in your terminal:
npm install --save-dev extract-text-webpack-plugin
This will install the plugin to your node_modules and also list it in your package.json file under thedevDependencies` object.
And then in your webpack.config.js where you are requiring modules, also require the plugin like so:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
After making these changes, you config file should look something like this:
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
},
{
test: /\.css$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("css-loader!sass-loader")
}
]
},
plugins: [
new ExtractTextPlugin("src/components/assets/css/style.css", {
allChunks: true
})
]
};
module.exports = config;
I have this modules in package.json
{
"name": "v1.0",
"version": "1.0.0",
"description": "",
"main": "app-main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"webpack": "^3.8.1"
},
"dependencies": {
"jquery": "^3.2.1"
}
}
`
My js bundle is working, but styles i cant compiling to 1 bundle for ex. main.bundle.css. This is my webpack.config.js
const path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'app-main' : './assets/js/app-main.js',
'vendor-main': './assets/js/vendor-main.js'
},
output: {
path: path.resolve(__dirname, './js'),
filename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["css/scss/main.scss"]
}
}]
}],
loaders: [
{
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'css/[name].bundle.css',
allChunks: true,
}),
]
};
When i start webpack, i dont have any errors, my js bundle is working, but css not. How i can fix this problem?
You are missing the call to extract function in your loader rules:
const path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'app-main': './assets/js/app-main.js',
'vendor-main': './assets/js/vendor-main.js'
},
output: {
path: path.resolve(__dirname, './js'),
filename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["css/scss/main.scss"]
}
}]
})
}],
loaders: [
{
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'css/[name].bundle.css',
allChunks: true,
}),
]
};
One more thing do not forget to require your .scss file in your .js file.
I am trying to process a less file with webpack to a css file, but it is not processed.
Here is where I say to webpack to process less files:
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
var merge = require('webpack-merge');
var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/;
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var sharedConfig = {
resolve: { extensions: [ '', '.js', '.ts' ] },
output: {
filename: '[name].js',
publicPath: '/dist/'
},
module: {
loaders: [
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: {
silent: true } },
{ test: /\.html$/, loader: 'raw' },
{ test: /\.css$/, loader: 'to-string!css' },
{ test: /\.(png|jpg|jpeg|gif|svg|ttf|woff)$/, loader: 'url', query:
{ limit: 25000 } },
{ test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader",
"css-loader!less-loader")}
]
}
};
Here is the location of my less file:
Location less file
And in package.json I have the following:
"webpack": "^1.12.14",
"webpack-externals-plugin": "^1.0.0",
"webpack-hot-middleware": "^2.10.0",
"webpack-merge": "^0.14.1",
"zone.js": "^0.6.21",
"extract-text-plus-webpack-plugin": "^1.0.0",
"less-loader": "^4.0.3"
I'm really disheartened, because I can't find any useful resource on the subject.
I merely want to watch my .css files, use post css' plugins to transform them and finally export them to my /public folder as I already do with my .jsx files
Here's my web pack configuration
const path = require('path');
const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: path.resolve('src/index.jsx'),
output: {
path: path.resolve('public'),
filename: 'bundle.js'
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
devServer: {
publicPath: "/",
contentBase: "./public"
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}, {
loader: 'postcss-loader',
options: {
plugins: function() {
return [require('lost'), require('postcss-cssnext'), require('postcss-import')]
}
}
}
]
})
}, {
test: /\.jsx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
],
exclude: /(node_modules|bower_components)/
}
]
},
plugins: [new ExtractTextPlugin("main.css")]
}
I assume you are using webpack2
If you want your css file dumped out separately, you would need ExtractTextPlugin. Here is my css loader which works
I define the post css plugins right within the webpack config, because then it stays in one place. Hope this helps:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
...
...
module.exports = {
...
...
module: {
rules: [
...
...
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract(
{ fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
modules: true,
localIdentName:'[name]__[local]___[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
require('autoprefixer')
]
}
}
},
]
})
},
}
Maybe your plugins are incorrectly created.
Try
return [require('lost')(), require('postcss-cssnext')(), require('postcss-import')()]
(Note the () to invoke the plugin creation).
Also are you actually using import/require() to include your css? If not you should, no magic stuff will glob your css :)