How do I circumvent a file loader? - javascript

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'
}
]
}

Related

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

nextJS/webpack: How to handle SASS files with font

I'm trying to configure webpack of my nextJS application to handle some SASS files, which looks like this:
#font-face
font-family: 'Marcellus'
font-style: normal
font-weight: 400
src: local('Marcellus-Regular'), url('/fonts/marcellus/Marcellus-Regular.ttf') format('truetype')
The # gives me an unexpected token error. So I tried to add some custom webpack configuration:
module.exports = {
webpack: function (config) {
config.module = {
rules: [
{ test: /(\.sass$)/, loaders: ['sass-loader'] },
{ test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
]
}
return config
}
}
With this the *.js files aren't recognized anymore and I'm not quite sure if the SASS files are loaded correctly. I'm very unexperienced with webpack.
You need to add multiple loaders for the SASS file:
test: /\.sass$/,
use: [{
loader: 'style-loader', // creates style nodes from JS strings
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'sass-loader', // compiles Sass to CSS
}],
Source: Sass-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

using webpack dev server with css loader

I have error of http://localhost:8080/images/app.jpg not found error. I suspect it's because css-loader simply ignore the path when I try to do this in my css file
.section-a{
background-color: #red500;
background-image: url(/images/app.jpg);
background-position: center;
}
I don't have problem in my production config as I don't need to use localhost:8080 as root.
Any clue what else I need to do? I have my css loader config like below
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader']
})
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=8192'
}

How to preload third-party's css and js files using webpack in ReactJS project?

Like using ProvidePlugin to preload jQuery, is there a way to preload a third-party's css and js files instead of using import in the entry js file?
Why I would like to preload these files is that I am getting an error when importing jQuery-ui in the entry js file. Also, I think it is good to preload the libraries.
./assets/js/jquery-ui.min.js
Critical dependencies:
719:76-84 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
# ./assets/js/jquery-ui.min.js 719:76-84
Thank you in advanced!
You should import third party css files at entry on webpack config. like example below:
module.exports = {
entry: {
'main': [
'bootstrap-sass!./src/theme/bootstrap.config.js',
'./src/client.js',
'./src/someCSSFILE.js'
]
},
output: {
path: assetsPath,
filename: 'bundle.js',
publicPath: 'http://' + host + ':' + port + '/dist/',
},
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.less$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
{ test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" }
]
}

Categories

Resources