I am trying to use grommet in my React Project and i am using webpack. I have added the scss loader and when i build my app i am getting the following error:
ERROR in ./~/css-loader!./~/sass-loader!./scss/index.scss
Module build failed:
#import "inuit-defaults/settings.defaults";
^
File to import not found or unreadable: inuit-defaults/settings.defaults
Parent style sheet: /Users/hduser/sample-app/node_modules/grommet/scss/grommet-core/_settings.scss
in /Users/hduser/sample-app/node_modules/grommet/scss/grommet-core/_settings.scss (line 2, column 1)
# ./scss/index.scss 4:14-116 13:2-17:4 14:20-122
Not sure what i am doing wrong..
Here is my webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports ={
devtool :'cheap-module-eval-source-map',
entry:[
'webpack/hot/only-dev-server',
'./index.jsx'
],
module:{
loaders:[
{
test: /\.jsx?$/,
exclude :/node_modules/,
include: __dirname,
loader:'react-hot'
},
{
test: /\.jsx?$/,
exclude :/node_modules/,
include: __dirname,
loader:'babel',
query:{
"plugins":["transform-decorators-legacy"],
"presets":["es2015","react"]
}
},
{
test :/\.css?$/,
include: __dirname,
loaders :['style','css']
},
{
test: /\.less$/,
loader: "style!css!less"
},
{
test: /\.json$/,
loader: "json"
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
},
resolve:{
extensions:['','.js','.jsx']
},
output:{
path: __dirname+'/',
publicPath:'/',
filename:'bundle.js'
},
devServer:{
contentBase: './',
hot:true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
,new webpack.NoErrorsPlugin()
]
}
Update
if u use npm3+ you can simply do this(see alan's explanation here):
{
test: /\.scss$/,
loader: 'style!css!sass?outputStyle=expanded&' +
'includePaths[]=' +
(encodeURIComponent(path.resolve('./node_modules')))
},
or write scss loader like this:
{
test: /\.scss$/,
loader: "style!css!sass?OutputStyle=expaned&" +
'includePaths[]=' +
(encodeURIComponent(
path.resolve(process.cwd(), './node_modules')
)) +
'&includePaths[]=' +
(encodeURIComponent(
path.resolve(process.cwd(),
'./node_modules/grommet/node_modules'))
)
}
I had the same issue, and got this working by this way:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
// ...
module: {
loaders: [
// ...
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}
]
},
sassLoader: {
includePaths: [ './node_modules' ]
},
plugins: [
new ExtractTextPlugin('public/grommet.css', {
allChunks: true
})
]
}
But remember to import the generated css file into your index.html
I fixed it by following Webpack 2 conventions.
{
test: /(\.scss$)/,
loaders: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader',
options: {
outputStyle: 'compressed',
includePaths: ['./node_modules']
}
}]
}
Working quite well on my side!
Use the following scss loader in webpack config (thanks to https://github.com/primozs)
{
test: /\.scss$/,
loader: 'style!css!sass?outputStyle=expanded&' +
'includePaths[]=' +
(encodeURIComponent(
path.resolve(process.cwd(), './node_modules')
)) +
'&includePaths[]=' +
(encodeURIComponent(
path.resolve( process.cwd(),
'./node_modules/grommet/node_modules'))
)
}
Related
at first i was getting error that scss files are not readable, when i tried to add options for sass loader to set its path to node_modules. But after that i could not solve this error. Is there anyother way to add multiple loaders and options for them?
this is my webpack.config.js"
var webpack = require('webpack');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
var BundleTracker = require('webpack-bundle-tracker');
var ExtractText = require('extract-text-webpack-plugin');
module.exports = {
entry: path.join(__dirname, 'assets/src/js/index'),
output: {
path: path.join(__dirname, 'assets/dist'),
filename: '[name]-[hash].js'
},
plugins: [
new BundleTracker({
path: __dirname,
filename: 'webpack-stats.json'
}),
new ExtractText({
filename: '[name]-[hash].css'
}),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
loader: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use:[{
loader: "sass-loader",
options: {
"includePaths": [
path.resolve(__dirname, 'node_modules')
]
}
},
{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
},
],
},
};```[this is the error i am getting][1]
[1]: https://i.stack.imgur.com/6O8ct.png
I get contiously this error
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
my webpack.config.js is as this
var path = require('path');
var hwp = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, '/src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, '/dist')
},
module: {
rules: [
{ test: /\.tsx?$/, loader: ['ts-loader'] },
{ test: /\.css$/, loader: "style-loader!css-loader" },
{
test: /\.scss$/, use: [{
loader: "style-loader" // creates style nodes from JS
strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
},
{ test: /\.(otf|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: 'file-loader?name=./Scripts/dist/[name].[ext]' }
]
},
plugins:[
new hwp({template:path.join(__dirname, '/src/index.html')})
]
}
can somebody help me, I have tried many samples of webpack.config.js but they don't work. is it really so hard to work with react?
I am new in react. I know how to code, but I can not build a project of my own
try the following snippet:
var path = require("path");
var hwp = require("html-webpack-plugin");
module.exports = {
entry: path.join(__dirname, "/src/index.js"),
output: {
filename: "build.js",
path: path.join(__dirname, "/dist")
},
module: {
rules: [
{ test: /\.tsx?$/, loader: ["ts-loader"] },
{ test: /\.css$/, loader: "style-loader!css-loader" },
{
test: /\.scss$/,
use: [
{
loader: "style-loader" // creates style nodes from JS
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
},
{
test: /\.(otf|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: "file-loader?name=./Scripts/dist/[name].[ext]"
}
]
},
plugins: [new hwp({ template: path.join(__dirname, "/src/index.html") })]
};
I want to set up my react project with an scss file for each component. So given a component called PermissionPicker I want to import a PermissionPicker.scss in the jsx file.
With my current set up the webpack loaders are only loading scss files when imported in my entry point (boot-client.tsx). import './PermissionPicker.scss' in my PermissionPicker components causes a webpack error:
Module parse failed: PermissionPicker.scss Unexpected token (1:1)
You may need an appropriate loader to handle this file type.
I was under the impression that I could import scss anywhere in my project similar to how create-react-app works.
Any advice would be great!
Below is my webpack config.
const sharedConfig = () => ({
stats: { modules: false },
resolve: { extensions: [ '.js', '.ts', '.tsx', '.jsx' ] },
output: {
filename: '[name].js',
publicPath: '/dist/' /
},
module: {
rules: [
{ test: /\.tsx?$/, include: /client/, use: 'babel-loader' },
{ test: /\.tsx?$/, include: /client/, use: 'awesome-typescript-loader?silent=true' }
]
},
plugins: [new CheckerPlugin()]
});
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig(), {
entry: { 'main-client': './client/boot-client.tsx' },
module: {
rules: [
{ test: /\.css$/, use: ExtractTextPlugin.extract({ use: 'css-loader' }) },
{ test: /\.scss$/, use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
},
{ test: /\.(png|jpg|jpeg|gif|svg)(\?\S*)?$/, use: 'url-loader?limit=25000' }
]
},
output: { path: path.join(__dirname, clientBundleOutputDir) },
plugins: [
new ExtractTextPlugin('site.css'),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
new webpack.SourceMapDevToolPlugin({
filename: '[file].map',
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]')
})
] : [
])
});
You need to install node-sass with sass-loader, because the sass-loader requires node-sass as peerDependency
npm install sass-loader node-sass --save-dev
And missing something as include: join(__dirname, 'src')
rules: [
{
test: /\.css$/,
include: join(__dirname, 'src'),
use: ExtractTextPlugin.extract({ use: 'css-loader' })
},
{
test: /\.scss$/,
include: join(__dirname, 'src'),
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
},
{ test: /\.(png|jpg|jpeg|gif|svg)(\?\S*)?$/, use: 'url-loader?limit=25000' }
]
The src is a common path for Components, you need to indicate the path from the path of your config file
I am trying to use css modules inside react, but it is not working.
The log of this code:
import React from 'react'
import styles from '../../css/test.css'
class Test extends React.Component {
render() {
console.log(styles)
return (
<div className={styles.app}>
<p>This text will be blue</p>
</div>
);
}
}
export default Test
returns Object {}
and the rendered code are tags with no class:
<div><p>This text will be blue</p></div>
The css code is available at site, here is my test.css:
.test p {
color: blue;
}
If I changed the div to have class='test', the color of p changes to blue
Here is my webpack.config.js
var path = require('path')
var webpack = require('webpack')
var HappyPack = require('happypack')
var BundleTracker = require('webpack-bundle-tracker')
var path = require('path')
var ExtractTextPlugin = require("extract-text-webpack-plugin")
function _path(p) {
return path.join(__dirname, p);
}
module.exports = {
context: __dirname,
entry: [
'./assets/js/index'
],
output: {
path: path.resolve('./assets/bundles/'),
filename: '[name].js'
},
devtool: 'inline-eval-cheap-source-map',
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new HappyPack({
id: 'jsx',
threads: 4,
loaders: ["babel-loader"]
}),
new ExtractTextPlugin("[name].css", { allChunks: true })
],
module: {
loaders: [
{
test: /\.css$/,
include: path.resolve(__dirname, './assets/css/'),
loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")
},
{
test: /\.scss$/,
include: path.resolve(__dirname, './assets/css/'),
loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader!sass-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")
},
{
test: /\.jsx?$/,
include: path.resolve(__dirname, './assets/js/'),
exclude: /node_modules/,
loaders: ["happypack/loader?id=jsx"]
},
{
test: /\.png$/,
loader: 'file-loader',
query: {
name: '/static/img/[name].[ext]'
}
}
]
},
resolve: {
modulesDirectories: ['node_modules'],
extensions: ['', '.js', '.jsx'],
alias: {
'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask')
},
}
}
Can anyone help me?
Thanks in advance.
Looks like your passing the css-loader params to the resolve-url-loader:
"css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]"
Should be:
"css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]&importLoaders=1!resolve-url-loader"
A lot of time passed since this question, so my webpack was update many times with another technologies.
This webpack config is working:
...
module.exports = {
entry,
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
devtool:
process.env.NODE_ENV === 'production' ? 'source-map' : 'inline-source-map',
module: {
rules: [
{
test: /\.jsx?$/,
include: path.resolve(__dirname, './app/view/'),
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.pcss$/,
include: path.resolve(__dirname, './app/view/'),
use: [
{
loader: 'style-loader'
},
{
loader:
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
require('postcss-import'),
require('postcss-mixins'),
require('postcss-cssnext')({
browsers: ['last 2 versions']
}),
require('postcss-nested'),
require('postcss-brand-colors')
];
}
}
}
],
exclude: /node_modules/
},
{
test: /\.(png|svg|jpg|webp)$/,
use: {
loader: 'file-loader'
}
}
]
},
resolve: {
extensions: ['.js', '.jsx'],
modules: [path.resolve(__dirname, 'node_modules')]
},
plugins
};
I guess that there is an issue with older versions at webpack with this line:
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
Try importLoaders and importLoader
You can see my repo too.
In my specific case, I'm using official utility facebook/create-react-app. You have to run the following command to get access to the webpack configuration:
npm run eject
You will then need to edit config/webpack.config.js and set the css-loader modules option to true.
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules:true <-----
}),
I'd like to use react-infinite-calendar component for a personal project. It's not picking up the css. I think my webpack configuration is the problem as I'm using react-css-modules.
Could someone show me what I'd need to do to get it working?
My webpack configuration is:
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
context: path.join(__dirname, 'client'),
devtool: 'source-map',
output: {
path: './dist/client/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
// https://github.com/gajus/react-css-modules
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
]
},
resolve: {
extensions: ['', '.js', '.json']
},
plugins: [
new CopyWebpackPlugin([
{from: 'static/index.html'}
])
]
};
My date selector component is:
import React from 'react';
import InfiniteCalendar from 'react-infinite-calendar';
import 'react-infinite-calendar/styles.css'; // only needs to be imported once
import {TODAY} from '../../server/constants/date';
export default class DateSelector extends React.Component {
render() {
return (
<div>
<InfiniteCalendar
width={400}
height={600}
selectedDate={TODAY}
maxDate={TODAY}
/>
</div>
);
}
}
Another option is to exclude react-infinite-calendar from your CSS module loader and include it in the standard CSS loader.
That way you don't have to rename all of your CSS files.
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
exclude: /react-infinite-calendar/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
},
{
test: /\.css$/,
include: /react-infinite-calendar/,
loader: 'style-loader!css-loader',
},
]
I worked around this by having to separate webpack loaders for locally scoped css-modules and globally scoped ones. My webpack configuration is below and so for css modules I've had to name the files so they end with .module.css.
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
context: path.join(__dirname, 'client'),
devtool: 'source-map',
output: {
path: './dist/client/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
// https://github.com/gajus/react-css-modules
test: /\.module.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
{
test: /^((?!\.module).)*css$/,
loader: 'style-loader!css-loader'
},
]
},
resolve: {
extensions: ['', '.js', '.json']
},
plugins: [
new CopyWebpackPlugin([
{from: 'static/index.html'}
])
]
};