Override image path

[darioblanco]

This PR gives a solution to https://github.com/mdbootstrap/bootstrap-material-design/issues/106

I have seen that the previous branches have some conflicts (though I think they should have been merged before). Some people contributed great work but I don't know why this issue hasn't been fixed for so long, please let me know how I can help so we can get rid of it, I am happy to give any extra configuration file or information.

I have seen this under the improvement tag, but I think it is rather a bug that should be fixed. Which is also a small fix and will help a lot of people who want to import your SCSS files :)

Example of how to import mdbootstrap with SASS

<style lang="scss">
$roboto-font-path: '~mdbootstrap/font/roboto/';
$image-path: '~mdbootstrap/img/';
@import "~mdbootstrap/scss/mdb.scss";
</style>

Tested with the following rules in a vue project called mitsu

rules: [
     {
       test: /\.vue$/,
       use: [
         {
           loader: 'vue-loader',
           options: {
             preserveWhitespace: false,
             template: {
               doctype: 'html'
             },
             loaders: {
               css: [
                 {
                   loader: 'vue-style-loader',
                   options: {
                     shadowMode: false,
                     sourceMap: false
                   }
                 },
                 {
                   loader: 'css-loader',
                   options: {
                     sourceMap: false,
                     minimize: false
                   }
                 }
               ],
               sass: [
                 {
                   loader: 'vue-style-loader',
                   options: {
                     shadowMode: false,
                     sourceMap: false
                   }
                 },
                 {
                   loader: 'css-loader',
                   options: {
                     sourceMap: false,
                     minimize: false
                   }
                 },
                 {
                   loader: 'sass-loader',
                   options: {
                     indentedSyntax: true,
                     sourceMap: false
                   }
                 }
               ],
               scss: [
                 {
                   loader: 'vue-style-loader',
                   options: {
                     shadowMode: false,
                     sourceMap: false
                   }
                 },
                 {
                   loader: 'css-loader',
                   options: {
                     sourceMap: false,
                     minimize: false
                   }
                 },
                 {
                   loader: 'sass-loader',
                   options: {
                     sourceMap: false
                   }
                 }
               ],
               less: [
                 {
                   loader: 'vue-style-loader',
                   options: {
                     shadowMode: false,
                     sourceMap: false
                   }
                 },
                 {
                   loader: 'css-loader',
                   options: {
                     sourceMap: false,
                     minimize: false
                   }
                 },
                 {
                   loader: 'less-loader',
                   options: {
                     sourceMap: false
                   }
                 }
               ],
               stylus: [
                 {
                   loader: 'vue-style-loader',
                   options: {
                     shadowMode: false,
                     sourceMap: false
                   }
                 },
                 {
                   loader: 'css-loader',
                   options: {
                     sourceMap: false,
                     minimize: false
                   }
                 },
                 {
                   loader: 'stylus-loader',
                   options: {
                     sourceMap: false
                   }
                 }
               ],
               styl: [
                 {
                   loader: 'vue-style-loader',
                   options: {
                     shadowMode: false,
                     sourceMap: false
                   }
                 },
                 {
                   loader: 'css-loader',
                   options: {
                     sourceMap: false,
                     minimize: false
                   }
                 },
                 {
                   loader: 'stylus-loader',
                   options: {
                     sourceMap: false
                   }
                 }
               ],
               js: [
                 {
                   loader: 'cache-loader',
                   options: {
                     cacheDirectory: '/Users/dario/Programming/minddoc/mitsu/node_modules/.cache/cache-loader'
                   }
                 },
                 {
                   loader: 'babel-loader'
                 }
               ],
               ts: [
                 {
                   loader: 'cache-loader',
                   options: {
                     cacheDirectory: '/Users/dario/Programming/minddoc/mitsu/node_modules/.cache/cache-loader'
                   }
                 },
                 {
                   loader: 'babel-loader'
                 },
                 {
                   loader: 'ts-loader',
                   options: {
                     transpileOnly: true,
                     appendTsSuffixTo: [
                       /\.vue$/
                     ],
                     happyPackMode: false
                   }
                 }
               ]
             },
             cssSourceMap: false,
             cssModules: {
               localIdentName: '[name]_[local]__[hash:base64:5]'
             }
           }
         }
       ]
     },
     {
       test: /\.(png|jpe?g|gif)(\?.*)?$/,
       use: [
         {
           loader: 'url-loader',
           options: {
             limit: 10000,
             name: 'img/[name].[hash:8].[ext]'
           }
         }
       ]
     },
     {
       test: /\.(svg)(\?.*)?$/,
       use: [
         {
           loader: 'file-loader',
           options: {
             name: 'img/[name].[hash:8].[ext]'
           }
         }
       ]
     },
     {
       test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
       use: [
         {
           loader: 'url-loader',
           options: {
             limit: 10000,
             name: 'media/[name].[hash:8].[ext]'
           }
         }
       ]
     },
     {
       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
       use: [
         {
           loader: 'url-loader',
           options: {
             limit: 10000,
             name: 'fonts/[name].[hash:8].[ext]'
           }
         }
       ]
     },
     {
       test: /\.css$/,
       include: [
         function () { /* omitted long function */ }
       ],
       use: [
         {
           loader: 'vue-style-loader',
           options: {
             shadowMode: false,
             sourceMap: false
           }
         },
         {
           loader: 'css-loader',
           options: {
             sourceMap: false,
             minimize: false
           }
         },
         {
           loader: 'postcss-loader',
           options: {
             sourceMap: false
           }
         }
       ]
     },
     {
       test: /\.stylus$/,
       include: [
         function () { /* omitted long function */ }
       ],
       use: [
         {
           loader: 'vue-style-loader',
           options: {
             shadowMode: false,
             sourceMap: false
           }
         },
         {
           loader: 'css-loader',
           options: {
             sourceMap: false,
             minimize: false
           }
         },
         {
           loader: 'postcss-loader',
           options: {
             sourceMap: false
           }
         },
         {
           loader: 'stylus-loader',
           options: {
             sourceMap: false
           }
         }
       ]
     },
     {
       test: /\.styl$/,
       include: [
         function () { /* omitted long function */ }
       ],
       use: [
         {
           loader: 'vue-style-loader',
           options: {
             shadowMode: false,
             sourceMap: false
           }
         },
         {
           loader: 'css-loader',
           options: {
             sourceMap: false,
             minimize: false
           }
         },
         {
           loader: 'postcss-loader',
           options: {
             sourceMap: false
           }
         },
         {
           loader: 'stylus-loader',
           options: {
             sourceMap: false
           }
         }
       ]
     },
     {
       test: /\.sass$/,
       include: [
         function () { /* omitted long function */ }
       ],
       use: [
         {
           loader: 'vue-style-loader',
           options: {
             shadowMode: false,
             sourceMap: false
           }
         },
         {
           loader: 'css-loader',
           options: {
             sourceMap: false,
             minimize: false
           }
         },
         {
           loader: 'postcss-loader',
           options: {
             sourceMap: false
           }
         },
         {
           loader: 'sass-loader',
           options: {
             indentedSyntax: true,
             sourceMap: false
           }
         }
       ]
     },
     {
       test: /\.scss$/,
       include: [
         function () { /* omitted long function */ }
       ],
       use: [
         {
           loader: 'vue-style-loader',
           options: {
             shadowMode: false,
             sourceMap: false
           }
         },
         {
           loader: 'css-loader',
           options: {
             sourceMap: false,
             minimize: false
           }
         },
         {
           loader: 'postcss-loader',
           options: {
             sourceMap: false
           }
         },
         {
           loader: 'sass-loader',
           options: {
             sourceMap: false
           }
         }
       ]
     },
     {
       test: /\.less$/,
       include: [
         function () { /* omitted long function */ }
       ],
       use: [
         {
           loader: 'vue-style-loader',
           options: {
             shadowMode: false,
             sourceMap: false
           }
         },
         {
           loader: 'css-loader',
           options: {
             sourceMap: false,
             minimize: false
           }
         },
         {
           loader: 'postcss-loader',
           options: {
             sourceMap: false
           }
         },
         {
           loader: 'less-loader',
           options: {
             sourceMap: false
           }
         }
       ]
     },
     {
       test: /\.module\.css$/,
       use: [
         {
           loader: 'vue-style-loader',
           options: {
             shadowMode: false,
             sourceMap: false
           }
         },
         {
           loader: 'css-loader',
           options: {
             sourceMap: false,
             minimize: false,
             modules: true,
             importLoaders: 1,
             localIdentName: '[name]_[local]__[hash:base64:5]'
           }
         },
         {
           loader: 'postcss-loader',
           options: {
             sourceMap: false
           }
         }
       ]
     },
     {
       test: /\.module\.stylus$/,
       use: [
         {
           loader: 'vue-style-loader',
           options: {
             shadowMode: false,
             sourceMap: false
           }
         },
         {
           loader: 'css-loader',
           options: {
             sourceMap: false,
             minimize: false,
             modules: true,
             importLoaders: 1,
             localIdentName: '[name]_[local]__[hash:base64:5]'
           }
         },
         {
           loader: 'postcss-loader',
           options: {
             sourceMap: false
           }
         },
         {
           loader: 'stylus-loader',
           options: {
             sourceMap: false
           }
         }
       ]
     },
     {
       test: /\.module\.styl$/,
       use: [
         {
           loader: 'vue-style-loader',
           options: {
             shadowMode: false,
             sourceMap: false
           }
         },
         {
           loader: 'css-loader',
           options: {
             sourceMap: false,
             minimize: false,
             modules: true,
             importLoaders: 1,
             localIdentName: '[name]_[local]__[hash:base64:5]'
           }
         },
         {
           loader: 'postcss-loader',
           options: {
             sourceMap: false
           }
         },
         {
           loader: 'stylus-loader',
           options: {
             sourceMap: false
           }
         }
       ]
     },
     {
       test: /\.module\.sass$/,
       use: [
         {
           loader: 'vue-style-loader',
           options: {
             shadowMode: false,
             sourceMap: false
           }
         },
         {
           loader: 'css-loader',
           options: {
             sourceMap: false,
             minimize: false,
             modules: true,
             importLoaders: 1,
             localIdentName: '[name]_[local]__[hash:base64:5]'
           }
         },
         {
           loader: 'postcss-loader',
           options: {
             sourceMap: false
           }
         },
         {
           loader: 'sass-loader',
           options: {
             indentedSyntax: true,
             sourceMap: false
           }
         }
       ]
     },
     {
       test: /\.module\.scss$/,
       use: [
         {
           loader: 'vue-style-loader',
           options: {
             shadowMode: false,
             sourceMap: false
           }
         },
         {
           loader: 'css-loader',
           options: {
             sourceMap: false,
             minimize: false,
             modules: true,
             importLoaders: 1,
             localIdentName: '[name]_[local]__[hash:base64:5]'
           }
         },
         {
           loader: 'postcss-loader',
           options: {
             sourceMap: false
           }
         },
         {
           loader: 'sass-loader',
           options: {
             sourceMap: false
           }
         }
       ]
     },
     {
       test: /\.module\.less$/,
       use: [
         {
           loader: 'vue-style-loader',
           options: {
             shadowMode: false,
             sourceMap: false
           }
         },
         {
           loader: 'css-loader',
           options: {
             sourceMap: false,
             minimize: false,
             modules: true,
             importLoaders: 1,
             localIdentName: '[name]_[local]__[hash:base64:5]'
           }
         },
         {
           loader: 'postcss-loader',
           options: {
             sourceMap: false
           }
         },
         {
           loader: 'less-loader',
           options: {
             sourceMap: false
           }
         }
       ]
     },
     {
       test: /\.jsx?$/,
       include: [
         '/Users/dario/Programming/minddoc/mitsu/src',
         '/Users/dario/Programming/minddoc/mitsu/test'
       ],
       use: [
         {
           loader: 'cache-loader',
           options: {
             cacheDirectory: '/Users/dario/Programming/minddoc/mitsu/node_modules/.cache/cache-loader'
           }
         },
         {
           loader: 'babel-loader'
         }
       ]
     },
     {
       enforce: 'pre',
       test: /\.(vue|(j|t)sx?)$/,
       include: [
         '/Users/dario/Programming/minddoc/mitsu/src',
         '/Users/dario/Programming/minddoc/mitsu/test'
       ],
       use: [
         {
           loader: 'eslint-loader',
           options: {
             extensions: [
               '.js',
               '.vue',
               '.ts'
             ],
             envs: [
               'node'
             ],
             rules: {
               'no-console': 'off',
               'no-debugger': 'off'
             },
             emitWarning: true,
             formatter: function () { /* omitted long function */ }
           }
         }
       ]
     },
     {
       test: /\.tsx?$/,
       include: [
         '/Users/dario/Programming/minddoc/mitsu/src',
         '/Users/dario/Programming/minddoc/mitsu/test'
       ],
       use: [
         {
           loader: 'cache-loader',
           options: {
             cacheDirectory: '/Users/dario/Programming/minddoc/mitsu/node_modules/.cache/cache-loader'
           }
         },
         {
           loader: 'babel-loader'
         },
         {
           loader: 'ts-loader',
           options: {
             transpileOnly: true,
             appendTsSuffixTo: [
               /\.vue$/
             ],
             happyPackMode: false
           }
         }
       ]
     }
   ]
 },

[cjmaxik]

+1, please do it.

[darioblanco]

Can somebody merge? :)

[mateuszlubianka1993]

@cla-bot check

[cla-bot[bot]]

Thank you for your pull request and welcome to our community! We require contributors to sign a Contributor License Agreement and we don't seem to have CLAs on file for these contributors to the Pull Request: (@darioblanco). In order for your PR to be reviewed and merged, please sign our CLA first.

If there are any questions, please don't hesitate to get in touch with our Support team.

[cla-bot[bot]]

The cla-bot has been summoned, and re-checked this pull request!

[gbujanski]

old PR and outdated