alias-resolve-loader

Webpack preLoader lets you create custom aliases for CSS,less and SASS properties with an @alias rule

Usage no npm install needed!

<script type="module">
  import aliasResolveLoader from 'https://cdn.skypack.dev/alias-resolve-loader';
</script>

README

js-semistandard-styleBuild StatusCode ClimatenpmDependenciesdevDependenciesNPM version

Alias Resolve preLoader for webpack

Install webpack 1.x

$ npm install --save-dev alias-resolve-loader@1.0.6

Install webpack 2.x

$ npm install --save-dev alias-resolve-loader

Example webpack 1.x config

module.exports = {
  //...
  
  module: {
    preLoaders: [
      {
          test: /\.(less|scss|css)$/,
          loader: "alias-resolve-loader"
      }
    ]
  },
  
  aliasesResolve: {
    "@aliasName": "path/to/your/folder"
  },
  
  //...
};

Example webpack 2.x config

module.exports = {
  //...
  
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(less|scss|css)$/,
        use: {
          loader: 'alias-resolve-loader',
          options: {
            alias: {
             "@aliasName": "path/to/your/folder"
           }
          }
        },
      }
    ]
  },
  
  //...
};

A javascript file before compilation

@import "@aliasName/css/user.less";

body {
  background: #9e9e9e;
}

will become:

@import "path/to/your/folder/css/user.less";

body {
  background: #9e9e9e;
}