J'utilise peu de fonctionnalités de scss, même pour des projets de grande taille. Je trouve que le css scopé ou a minima les imports suffisent à organiser les feuilles de style. Parmis les fonctionnalités non disponibles dans le CSS natif et qui me servent souvent, il y a les variables (e.g. $button-color=#eeeeee) et les styles imbriqués. C'est vraiment sous exploiter scss.
En fouillant sur la façon de porter mon css sur des navigateurs qui datent, je suis tombé sur PostCSS. PostCSS transforme le code CSS incompatible avec du Javascript. C'est tout. Et si on en veut plus, on ajoute des plugins. Très léger, extensible, et déjà bien fourni par sa communauté, c'était l'outil idéal pour moi. Et si comme moi vous utilisez peu de fonctionnalités SCSS, porter le code ne demandera que d'ajouter une poignée de plugins qui resteront plus légers que d'utiliser node-sass. Pour comparaison, mes fichiers sont près de deux fois moins lourds avec PostCSS qu'avec node-sass, et je gagne une poignée de secondes au temps de build.
Au passage, pour ceux qui utilisent Vue, sachez que PostCSS est déjà embarqué notamment pour permettre d'utiliser le mot clé scoped qui isole les feuilles de style entre composant. Vous pouvez donc déjà tirer parti de sa puissance en lui ajoutant des plugins.
Au revoir npm rebuild node-sass.
J'utilise Webpack sur mes projets, je ne fournirai donc pas d'exemple avec yarn ou autre, mais utiliser PostCSS devrait être très simple quel que soit l'outil.
Voilà ce dont vous avez besoin
La base, les deux premiers paquets sont certainement déjà présents si vous utilisiez scss :
npm install --save style-loader css-loader postcss-loader
Pour ne plus s'embêter avec les préfixes spécifiques à chaque navigateur :
npm install --save autoprefixer
Pour pouvoir importer des fichiers css dans d'autres fichiers css :
npm install --save postcss-easy-import
Pour permettre l'imbrication de classes :
npm install --save postcss-nested
Pour pouvoir utiliser les dernières fonctionnalités CSS mais les rendre compatibles avec les anciens navigateurs :
npm install --save postcss-preset-env
Pour pouvoir utiliser des variables :
npm install --save postcss-simple-vars
Vous aurez besoin de renseigner les plugins que vous voulez appliquer ainsi que leur configuration. Pour cela j'utilise un fichier postcss.config.js. Notez que les plugins seront appliqués dans l'ordre dans lequel ils seront renseignés ici.
module.exports = {
plugins: {
'postcss-easy-import': {},
'postcss-nested': {},
'postcss-simple-vars': {},
'autoprefixer': {},
'postcss-preset-env': {},
},
};
J'utilise la configuration par défaut pour chacun. Mais vous pourriez par exemple changer les versions de navigateur supportées par votre site :
...
'postcss-preset-env': { browsers: 'last 2 versions' },
...
Pour que PostCSS traite vos fichiers, il faut qu'il sélectionne les fichiers avec l'extension que vous utilisez (e.g. .css), et qu'il applique un ensemble de loaders.
module: {
rules: [
... d'autres règles ...
{
test: /\.css$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
options: {
importLoaders: 1,
}
}, {
loader: 'postcss-loader',
}],
},
]
}
C'est tout.
Et rien à voir ou presque :
--fix (dans IntelliJ il vous souligne le non respect des règles)
