webpack (avec sass-loader) - fichier scss @import ne reconnaît pas résoudre alias
Mon projet structure:
webpack.config.js
app--
--> src
---->> components
------>>> myComponent.js
------>>> myComponent.scss
--> styles
---->> variables.scss
Dans webpack.config du module.exportations:
...
resolve: {
alias: {
styles: path.join(__dirname, 'app/styles')
}
}
Dans mon fichier - moncomposant.scss:
@import "styles/variables";
J'obtiens cette erreur lors de la construction de bundle.js:
Module build failed:
@import "styles/variables";
^
File to import not found or unreadable: styles/variables
Comment puis-je @import alias dans les fichiers sass?
- Peut-être l'ajout d'informations sur la structure du répertoire du projet, en particulier les fichiers mentionné, pourrait l'aider.
- ajout de la structure de projet à la question
- Un moyen très rapide de l'observation peut être sans importance: le répertoire
styles
est inclus à la fois dansalias.styles
commepath.join(..., 'app/styles')
et à l'importation comme@import "styles/variables"
. Il faudra peut-être@import "variables"
. - C'est de cette façon qu'un alias est défini et utilisé dans le webpack - webpack.github.io/docs/configuration.html#résoudre-alias
- Avez-vous trouvé une solution?
- nope, toujours pas de solution. actuellement je viens d'utiliser le chemin relatif dans le sass fichier d'importation, sans se référer à l'alias..
Vous devez vous connecter pour publier un commentaire.
J'ai été en mesure d'utiliser, sur une feuille de style, un alias que j'ai défini dans webpack en utilisant les éléments suivants:
juste en préfixant le nom d'alias avec
~
a fait le tour pour moi, comme suggéré par la documentation dans ici@import '~styles/variables';
Un correctif lié à ce sujet, supprimer
.scss
devrait être
@material
et le point depath.resolve(__dirname, 'node_modules/@material')
avec pas de chance. Posé une question stackoverflow.com/questions/48368639/...Depuis votre
webpack.config.js
fichier est déjà dans la/app
dossier, ne devrait pas l'alias être:?
Dans mon cas, la dépendance est un nœud du module, donc je peux l'importer comme ceci:
@import '~node-module-name/variables';
Et lors de l'utilisation du nœud réel module dir nom, mon éditeur (PhpStorm) ne montre pas de suspens erreur de chemin d'accès plus (le problème que @tkiethanom mentionné). Il semble que j'ai besoin de spécifier un alias dans webpack config si je veux utiliser sass style importations (p. ex.
my-package/colors
au lieu demy-package/_colors.scss
), et il semble qu'il n'a pas d'importance quel est le nom de l'alias, aussi longtemps que je utiliser un nœud de module nom du répertoire