nuxt-resolve-url-loader

Easy add 'resolve-url-loader' to Nuxt.js webpack config before scss-loader

How it works

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:

1{ // ... Webpack config
2  module: {
3    // ...
4    rules: [
5      // ...
6      {
7        test: /\.scss$/,
8        use: [
9          // ... Other loaders
10          {loader: 'scss-loader'}        
11        ]      
12      }     
13    ]
14  }
15}

After:

1{ // ... Webpack config
2  module: {
3    // ...
4    rules: [
5      // ...
6      {
7        test: /\.scss$/,
8        use: [
9          // ... Other loaders
10          {loader: 'resolve-url-loader'},
11          {loader: 'scss-loader', options: {sourceMap: true}}        
12        ]      
13      }     
14    ]
15  }
16}

Requirements

You need to ensure that you have resolve-url-loader installed:

1npm install --save-dev resolve-url-loader

Setup

1. Add nuxt-resolve-url-loader dependency to your project

1npm install --save-dev nuxt-resolve-url-loader

2. Add nuxt-resolve-url-loader to the buildModules section of nuxt.config.js

1export default {
2  buildModules: [
3    // Simple usage
4    'nuxt-resolve-url-loader',
5
6    // With options
7    ['nuxt-resolve-url-loader', { /* options for resolve-url-loader */ }]
8  ]
9}

:warning: If you are using Nuxt < v2.9 you have to install the module as a dependency (No --dev or --save-dev flags) and use modules section in nuxt.config.js instead of buildModules.

Options

See resolve-url-loader options for the complete list of options available. These options are passed through to the resolve-url-loader directly.

License

MIT License

Copyright (c) Igor Pylypenko