I want to compress CSS file from Material Design Lite, but Webpack doesn't see material.css file if I import it like this:
import 'material-design-lite';
But when I tried to import directly material.css like this:
import 'material-design-lite/material.css';
then I've got:
ERROR in ./~/material-design-lite/material.css
Module parse failed: /p/prod/node_modules/material-design-lite/material.css Unexpected character '#' (8:0)
Here is my Webpack conf file webpack.base.js:
var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var cssPath = path.join(__dirname, 'assets/css');
module.exports = {
context: __dirname,
entry: './assets/js/index',
output: {
path: path.resolve('./assets/bundles/'),
filename: "[name]-[hash].js"
},
plugins: [
new ExtractTextPlugin("[name]-[hash].css")
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'],
}, {
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
}
],
},
resolve: {
modulesDirectories: ['node_modules', cssPath],
extensions: ['', '.js', '.jsx', '.css']
},
}
Anyone has an idea what I did wrong?
The problem is that you are ignoring node_modules for your style and css loading - and the css file is in node_modules
Related
How can I primereact css import to nextjs
I did it according to the nextjs documentation. but it gave the error. I have to install loader.but I'm new to webpack. I dont find how to webpack config. Please produce a solution.
This is what worked for me in webpack.config.js file:
var webpack = require('webpack');
var path = require('path');
var nodeExternals = require('webpack-node-externals');
module.exports = {
target: 'web',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=100000'
}
]
},
mode: 'development'
};
Actually your need correct loaders to transpile from ES6 to ES5.
This should work.
TL;DR: Is there any way to automatically scan or automatically import all stylesheets used by our web packages, from our node_modules folder?
I am working on a project that uses angularJS as its MVC framework, and we are currently in the process of migrating to use webpack. I currently wrote the following configuration:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const bbProperties = require('./webpack.properties');
const appRoot = __dirname + "/../../..";
console.log('__dirname:', __dirname);
module.exports = {
entry: {
app: appRoot + bbProperties.app.entryScript,
login: appRoot + bbProperties.login.entryScript
},
output: {
path: appRoot + bbProperties.distFolder,
publicPath: "dist",
filename: "js/[name].bundle.js",
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2017']
}
},
{
test: /\.css$/,
//exclude: /node_modules/,
use: [
{loader: 'style-loader'},
{loader: 'css-loader', query: {importLoaders: 1}},
{loader: 'postcss-loader', query: {config: {path: __dirname+'/postcss.config.js'}}}
]
},
{
test: /\.(png|jpg|jpeg|gif)$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
name:'[name].[ext]',
outputPath:"/assets/images/"
}
}
]
},
{
test: /\.(ttf|eot|woff|woff2|svg)($|\?.*$)/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
name:'[name].[ext]',
outputPath:"/assets/fonts/"
}
}
]
},
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
moment: "moment"/*,
_: "lodash",
"window._": "lodash",
angular: "angular"*/
}),
//Creates an html file with all bundles injected as <script> tags
new HtmlWebpackPlugin({
chunks: ['app'],
filename: '../angular-app/menu/' + bbProperties.app.outputFile,
hash: "true", //cache busting
template: appRoot + bbProperties.app.location + "/" + bbProperties.app.inputFile
}),
//Second html bundle for login page
new HtmlWebpackPlugin({
chunks: ['login'],
filename: '../'+bbProperties.login.outputFile,
hash: "true", //cache busting
template: appRoot + bbProperties.login.location + "/" + bbProperties.login.inputFile
})
],
stats: {colors: true},
devtool: 'source-map',
node: {
fs: "empty"
}
};
As far as I understand, webpack will start creating a bundle from each entry file, adding any file it encounters in import statements recursively.
I also understand that I can require a package from my node_modules directory, and that in such a case webpack will search for a package.json file and import the file specified in the 'main' property of that file.
Lets say we are dependant on several packages, components and frameworks (for example: angular-ui-grid, angular-material etc...), I know I can manually import their CSS files using css loaders by importing them into my JS code.
Is there any way to automatically scan or automatically import all stylesheets used by those packages, from our node_modules folder?
my all css files placed under src/assets/css/* and i am trying to import or load css file inside my component, i have tried to load css with below webpack configuration
Webpack file
{ test: /\.css$/, loader: "style-loader!css-loader" }
Component
import './../../assets/css/bootstrap.min.css';
Also tried to load css in index.html file like <link rel="stylesheet" href="/src/assets/css/bootstrap.min.css">
Also, is there a way if i have 5-6 css files by which i dont need to load all files in every component like if we can add in <head> tag
Here is my webpack.config file. I have used foundation instead of bootstrap but the webpack configuration is similar.
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
'script!jquery/dist/jquery.min.js',
'script!foundation-sites/dist/js/foundation.min.js',
'./app/app.jsx'
],
externals: {
jquery: 'jQuery'
},
plugins:[
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery'
})
],
output: {
path: __dirname,
filename: './public/bundle.js'
},
resolve: {
root: __dirname,
modulesDirectories: [
'node_modules',
'./app/components',
'./app/api'
],
alias: {
applicationStyles: 'app/styles/app.scss',
actions: 'app/actions/actions.jsx',
reducers: 'app/reducers/reducers.jsx',
configureStore: 'app/store/configureStore.jsx'
},
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
},
test:/\.jsx?$/,
exclude: /(node_modules|bower_components)/
}
]
},
sassLoader:{
includePaths: [
path.resolve(__dirname, './node_modules/foundation-sites/scss')
]
},
devtool: 'cheap-module-eval-source-map'
};
And yes you can bundle the css in one file with webpack and import it in the root component.
Check my github repo for more details- https://github.com/hmachaharywork/ReactTodo
Use Extract text plugin. Only import this plugin in your webpack.conf.js
const ExtractTextPlugin = require("extract-text-webpack-plugin");
and refactor your rule like:
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
Finally, push new instance in plugin list:
plugins: [
new ExtractTextPlugin("styles.css"),
]
I'm migrating an Angular 1 project in order to be able to deploy everything with Webpack.
So far, I managed to configure almost everything but I'm having issues trying to export the static assets (fonts and images mostly).
I've configured the ExtractTextPlugin as below
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader','css-loader', {allChunks: true}) }
and in the compiled CSS the paths are replaced but the resulting absolute path is wrong. In fact the resulting path is /assetsweb/assets/.. while I expect it to be /assets/...
I cannot understand where the /assetsweb part is coming from.
Here's the Webpack configuration I'm using
var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
context: __dirname + "/src",
entry:{
web: "./web/wayonara.js",
mobile: "./mobile/wayonara.js"
},
output:{
path: __dirname + "/dist",
filename: "/[name]/bundle.js",
publicPath: "/assets"
},
plugins:[
new webpack.DefinePlugin({
ENV: JSON.stringify('dev')
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
EXIF: "exif-js",
"window.EXIF":"exif-js"
}),
new ExtractTextPlugin("/[name]/assets/css/bundle.css")
],
module:{
loaders: [
{
loader: "babel-loader",
test: /\.js?$/,
exclude: [/node_modules/, /bower_components/],
query: {
presets: ['es2015']
}
},
{ test: /\.html$/, loader: "html" },
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader','css-loader', {allChunks: true}) },
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: "file-loader?name=[path][name].[ext]"
},
{
test: /\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?/,
loader: 'file-loader?name=[path][name].[ext]'
}
]
}
};
Can you help me? Thanks in advance,
Best,
Maurizio
I just recognized that my stylesheet is 14mb when I am using the react essence library for the UI part. Webpack is also using forever to bundle in the beginning.
I just tested this with a simple react app where I import just the essence button. The stylesheet appears to be 7mb. It looks like webpack is importing everything instead of parts.
My webpack config file is simple:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'eval',
entry: [
'webpack-hot-middleware/client',
'./src/index.jsx'
],
output: {
path: path.join(__dirname, 'static'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new ExtractTextPlugin('styles.css', { allChunks: true }),
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('devolopment')
}
})
],
module: {
loaders: [
{
test: /\.(jsx|js)/,
loaders: ['react-hot', 'babel'],
resolve: ['.js', '.jsx'],
exclude: /node_modules/,
include: path.join(__dirname, 'src')
},
{
test: /(\.css|.less)$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader'),
resolve:['.less', '.css']
},
{
test: /\.(otf|eot|svg|ttf|woff)/,
loader: 'url-loader'
}
]
},
resolve: {
extensions: ['', '.js', '.json', '.less', '.jsx']
}
};
What is the problem and how do I solve this?
Edit:
The webpack output when importing button from react-essence: Link
The webpack out when importing button from essence-button: Link
Depending on your Essence component import there are 2 options:
import { Btn } from react-essence will import all Essence css.
import Btn from essence-btn will import only the Essence Btn css & Essence core.
Will help me to solve this issue if you can share your code snippet so I can test/debug it.