https://github.com/vqun/alias-loader
A webpack loader used to resolve alias (typically in .less)
https://github.com/vqun/alias-loader
alias-loader loader webpack-loader
Last synced: 12 months ago
JSON representation
A webpack loader used to resolve alias (typically in .less)
- Host: GitHub
- URL: https://github.com/vqun/alias-loader
- Owner: vqun
- License: mit
- Created: 2017-05-25T06:36:38.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-25T06:38:00.000Z (almost 9 years ago)
- Last Synced: 2025-02-04T15:50:15.024Z (about 1 year ago)
- Topics: alias-loader, loader, webpack-loader
- Language: JavaScript
- Size: 2.93 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# alias-loader
A webpack loader used to resolve alias.
Typically when we use less in our project, the less-loader cannot resolve the aliases defined in webpack.config.resolve.alias.
Many times, our less file is imported to other one, and they may be in different contexts. For example:
If we have `/root/styles/variables.less`, and `/root/components/button/button.less`, we need the `variables.less` to be imported to `button.less`
**Without `alias-loader`**, we should import it like this:
```css
/* in button.less: */
@import '../../styles/variable.less';
/* ... other less code */
```
that means we must actually know what the relative between variables.less and button.less, and this is really messy.
But now, with `alias-loader`, things is extremely simple. we just need add `alias-loader` to less file resolve loaders, and define the alias, as:
```javascript
// in webpack.config.js, with webpack > v2.0.0
resolve: {
alias: {
'@styles': path.join(__dirname, 'styles'),
// ... and so on
}
},
module: {
rules: [{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-laoder', 'alias-loader']
}]
}
// also you can define your own aliases for alias-loader in the option:
use: ['style-loader', 'css-loader', 'less-laoder', {
loader: 'alias-loader',
options: {
alias: {
// aliases for alias-loader here
}
}
}]
```
then, just modify our button.less:
```css
/* in button.less: */
@import '@styles/variables.less';
/* ... other less code */
```
Also, you can use `alias-laoder` for any file typ as you want, but I really recomend it just on the case as `.less` files.