Node sass importer supporting custom alias for directories or specific files.
npm i --save-dev node-sass-alias-importerDefine aliases for directories or specific files in sass imports as it is done in javascript using the babel-plugin-module-resolver package.
const sass = require("node-sass");
const aliasImporter = require("node-sass-alias-importer");
sass.render({
file: "./src/components/foo/foo.scss",
importer: [
aliasImporter({
themes: "./src/styles/themes",
variables: "./src/styles/variables/index"
})
]
});Now you can use aliases for importing specific files, or as base paths in your import statements:
// file: src/components/foo/foo.scss
@import "themes/foo-theme/index";
// Resolved as "../../styles/themes/foo-theme/index"
@import "variables";
// Resolved as "../../styles/variables/index"
aliasImporter(aliases [,options])
- Arguments
- aliases -
<Object>Object containing aliases as keys, relative or absolute paths as values. - options -
<Object>- root -
<String>Base path for all defined aliases. Defaultprocess.cwd()
- root -
- aliases -
const sassPlugin = require("rollup-plugin-sass");
const sass = require("node-sass");
const aliasImporter = require("node-sass-alias-importer");
module.exports = {
input: "src/index.js",
output: {
file: "dist/index.js"
},
plugins: [
sassPlugin({
insert: true,
runtime: sass,
options: {
importer: aliasImporter(
{
themes: "themes",
variables: "variables/index"
},
{
root: "./src/styles"
}
)
}
})
]
};const aliasImporter = require("node-sass-alias-importer");
module.exports = () => ({
entry: ["./src/index.js"],
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
{
loader: "sass-loader",
options: {
importer: aliasImporter({
variables: "./src/styles/variables/index"
})
}
}
],
include: path.resolve(__dirname, "src")
}
]
}
});If you are using Webpack and sass-loader, you can use the Webpack's resolve.alias option directly:
// webpack.config.js
module.exports = {
//...
resolve: {
alias: {
themes: path.resolve(__dirname, "src/styles/themes"),
variables: path.resolve(__dirname, "src/styles/variables/index")
},
},
};MIT, see LICENSE for details.