Easy add 'resolve-url-loader' to Nuxt.js webpack config before scss-loader
This module:
- traverse whole webpack config tree
- find json-paths to scss-loader configs by matching
{loader: 'scss-loader'}
- insert resolve-url-loader just before scss-loader configs in nuxt webpack config.
- reconfigure scss-loader for adding source-maps
Before:
{ // ... Webpack config
module: {
// ...
rules: [
// ...
{
test: /\.scss$/,
use: [
// ... Other loaders
{loader: 'scss-loader'}
]
}
]
}
}
After:
{ // ... Webpack config
module: {
// ...
rules: [
// ...
{
test: /\.scss$/,
use: [
// ... Other loaders
{loader: 'resolve-url-loader'},
{loader: 'scss-loader', options: {sourceMap: true}}
]
}
]
}
}
You need to ensure that you have resolve-url-loader
installed:
npm install --save-dev resolve-url-loader
- Add
nuxt-resolve-url-loader
dependency to your project
npm install --save-dev nuxt-resolve-url-loader
- Add
nuxt-resolve-url-loader
to thebuildModules
section ofnuxt.config.js
export default {
buildModules: [
// Simple usage
'nuxt-resolve-url-loader',
// With options
['nuxt-resolve-url-loader', { /* options for resolve-url-loader */ }]
]
}
dependency
(No --dev
or --save-dev
flags) and use modules
section in nuxt.config.js
instead of buildModules
.
See resolve-url-loader options for the complete list of options available. These options are passed through to the resolve-url-loader
directly.
Copyright (c) Igor Pylypenko