Puis-je importer des fichiers CSS normaux dans SCSS à l'aide de « @import » ?

Importation de fichiers CSS réguliers dans SCSS avec @import

De nombreux développeurs se retrouvent à désirer les fonctionnalités combinées et compressées de SCSS sans avoir besoin de renommer tous leurs fichiers vers *.scss. Pour résoudre ce problème, la question se pose : est-il possible d'importer des fichiers CSS classiques dans SCSS à l'aide de la commande @import ?

Réponse

Au départ, cette approche était confrontée à des défis, ce qui entraîne une confusion au sein de la communauté. Cependant, depuis décembre 2014, le problème a été résolu via une pull request GitHub.

La syntaxe mise à jour pour importer des fichiers CSS directement dans SCSS est @import "votre/chemin/vers/le/fichier", sans une extension de fichier après le nom du fichier. Cela importera le fichier directement.

Si l'extension *.css est ajoutée, cela se traduit par la règle CSS @import url(...).

Pour les bundles de modules comme webpack, cela il est recommandé d'utiliser ~ au début du chemin. Pour importer le fichier node_modules/bootstrap/src/core.scss, utilisez simplement @import "~bootstrap/src/core."

Remarque importante

Cela vaut la peine de le noter que cette solution ne fonctionnera peut-être pas pour tout le monde. Si votre interpréteur est basé sur libsass, il devrait fonctionner comme prévu. D'un autre côté, il s'est avéré fonctionner avec node-sass mais peut ne pas fonctionner sur certaines instances Ruby.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!