问题
My project structure:
webpack.config.js
app--
--> src
---->> components
------>>> myComponent.js
------>>> myComponent.scss
--> styles
---->> variables.scss
In webpack.config module.exports:
...
resolve: {
alias: {
styles: path.join(__dirname, 'app/styles')
}
}
In my file - myComponent.scss:
@import "styles/variables";
I am getting this error when building bundle.js:
Module build failed:
@import "styles/variables";
^
File to import not found or unreadable: styles/variables
How can I @import aliases in sass files?
回答1:
I was able to use, on a stylesheet, an alias that I defined in webpack by using the following:
@import '~alias/variables';
just by prefixing the alias with ~
did the trick for me, as suggested by documentation in here
回答2:
Another fix related to this subject, remove .scss
@import '~scss/common.scss';
should be
@import '~scss/common';
回答3:
Since your webpack.config.js
file is already in the /app
folder, shouldn’t the alias be:
resolve: {
alias: {
styles: path.join(__dirname, 'styles')
}
}
?
回答4:
In my case the dependency is a node module, therefore I can import it like this:
@import '~node-module-name/variables';
And when using the actual node module dir name, my editor (PhpStorm) is not showing unresolved path error anymore (the problem which @tkiethanom mentioned). It looks like I need to specify alias in webpack config if I want to use sass style imports (e.g. my-package/colors
instead of my-package/_colors.scss
), and it seems it doesn't matter what is the name of that alias, as long as I use node module directory name
来源:https://stackoverflow.com/questions/34717203/webpack-with-sass-loader-scss-file-import-does-not-recognize-resolve-alias