Develop Reference

Webpack loader configuration to load css and sass files for React JS

I have installed react-h5-audio-player in a React app made with create-react-app and it worked fine.
I did same to customized React project and I am being asked to configure webpack to load the css files.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
I have attached screenshot of error log and code section where error happened
The error (
ERROR in ./node_modules/react-h5-audio-player/lib/styles.css 1:0
Module parse failed: Unexpected token (1:0)
) happened in the below css file, these css files are made by installed audio player (which is made with typescript)
.rhap_container {
box-sizing: border-box;
display: flex;
flex-direction: column;
line-height: 1;
font-family: inherit;
width: 100%;
padding: 10px 15px;
background-color: #fff;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
}
.rhap_container:focus:not(:focus-visible) {
outline: 0;
}

You need to add css-loader and style-loader to enable your webpack to bundle CSS files:
Install the loaders:
npm install css-loader style-loader --save-dev
npm install sass-loader node-sass --save-dev
Set the rules in webpack config:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
loader: ["style-loader", "css-loader"],
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
]
}
};
Check css-loader, style-loader and sass-loader

CSS file causing error in react/webpack configuration

I have a fullstack project, which is made with Django-REST and React as the frontend.
Everytime i try to load a css file into my react application i get an error
import './Dashboard.css'
export default class Dashboard extends Component {
render() {
...
Dashboard.css
body {
margin:0;
}
here is my webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
}
what is weird to me is that, inline css, works just fine, it's only when i try to load an external sheet, that i get issues. Does anybody know what may be the cause of the problem?

You need a css-loader. Update webpack.config.js to this:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
]
}
}
And install the loader:
npm install --save-dev css-loader
It should build properly now. You can read more in the Webpack docs

How do I circumvent a file loader?

In my webpack.config.js I have this:
module: {
loaders: [
{
test: /\.css$/,
include: APP_DIR,
loader: 'style-loader!css-loader',
},
{
test: /\.scss$/,
include: APP_DIR,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.svg$/,
loader: 'babel-loader!react-svg-loader',
},
],
},
Which I am using to import some svg files directly in Components.
However now I want to show a svg file that resides inside my React App folder via scss only. But the babel-loader!react-svg-loader is preventing it from happening. I am loading the scss via React.
This:
background-image: url('../assets/icons/pattern/size_35.svg');
Becomes
background-image: url([object Object]);
I can do this but it feels hackish:
background-image: url('[FULL_PATH_FROM_ROOT]/assets/icons/pattern/size_35.svg');
From my understanding is that for this case I should not have any file loader but because I already have one it's preventing this from working.
I do want to resolve the relative url from the React App though. So that this:
background-image: url('../assets/icons/pattern/size_35.svg');
becomes this
background-image: url('[FULL_PATH_FROM_ROOT]/assets/icons/pattern/size_35.svg');
in frontend.

If you only want to circumvent your react-svg-loader once, you can write the loaders inline:
background-image: url('!!file-loader!../assets/icons/pattern/size_35.svg');
If this will be a common occurrence, you can use a resourceQuery for the svgs you want to treat as files:
{
test: /\.svg$/,
oneOf: [
{
resourceQuery: /file/, // size_35.svg?file
use: 'file-loader'
},
{
use: 'babel-loader!react-svg-loader'
}
]
}

Unable to load/require any css files in Node

I have a ReactJS application based off of this boilerplate.
I am simply trying to load and require or import a css file (to be embedded in <style> tag, as opposed to css link). Below are the two methods I have tried, and not ever both at the same time.
Method 1: Configure loaders in Webpack
These are all the loader configurations I have tried, but still resulted in this error: [require-hacker] Trying to load "something.css" as a "*.js"
dev.config.js
module: {
loaders: [
// loaders in here
]
}
{ test: /\.css$/, loader: "style!css" }
{ test: /\.css$/, loader: 'style-loader!css-loader'} from here
{ test: /\.css$/, loader: 'style!css!postcss' }
{ test: /\.css$/, loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]!postcss' }
{ test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
]
}
{
test: /\.css$/,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
},
Method 2: Use loaders directly
If I remove the css loaders altogether, and instead call require('style!css!./something.css'), I get this error:
Error: Cannot find module 'style!css!./something.css'
---- # NOTE: ----
I am able to properly require my .scss files and its webpack loader configuration is below. But for some reason my css files don't want to play that way too.
{ test: /\.scss$/,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' }

change extensions: ['less','scss'] to extensions: ['less','scss','css'] in webpack-isomorphic-tools.js at line 65.for more details you can see this

url in scss files using raw in Webpack not working

I am currently working on an Angular 2 project, using webpack.
I am using the same kind of configuration as
https://angular.io/docs/ts/latest/guide/webpack.html#!#loaders
I have an application-wide file scss (styles.scss), located in ./public/scss/styles.scss which is correctly linked in my index.html after webpacking.
<link href="/app.27a803de076ae294258e.css" rel="stylesheet">
Other scss files (located in src/app) are component-scoped styles, they are loaded as string via raw loader, and inlined in "style" tag.
SVG files are managed via file-loader, they are copied into an "assets" output folder, and renamed with a hash.
For an unknown reason, all svg files mentioned in component-scoped styles via 'url()' are not found by the application, as if they were not required during the webpack step. They do not appear in the output assets folder. The 'url()' statement is not modified.
I would expect these lines would be replaced by a "require ..." and that require would trigger the file loader used for svg.
Here are my loaders from the webpack.config.js :
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.scss$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')
},
{
test: /\.scss$/,
include: helpers.root('src', 'app'),
loaders: ['raw', 'sass?sourceMap']
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico|otf)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
}
]
Here is an example of one component scss files :
.back-button {
background: url(public/images/back.svg) no-repeat left;
width: 16px;
height: 19px;
background-size: contain;
margin-left: 15px;
}
If I move the content of this .scss in the main file styles.scss, the image is correctly added to the assets folder, and the content of the url() is correctly replaced :
.back-button {
background: url(/assets/back.be6884cba01794a64105228e8e25ce66.svg) no-repeat 0;
width: 16px;
height: 19px;
background-size: contain;
margin-left: 15px;
}
I supposed it has something to do with the fact that component scss are loaded inline in the style tag.
Thanks in advance :)