angular-cli : Configurer sass-loader pour inclure node_modules dans includePath

Question

Angular-cli : 1.0.0-beta.15

nœud : 6.5.0

OS : linux x64

Je veux compiler le fichier scss de bootstrap-material-design v4-dev en le mettant dans le tableau apps[0].styles[] de la branche angular-cli.json mais je reçois l'erreur suivante :

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./~/bootstrap-material-design/scss/bootstrap-material-design.scss                                               
Module build failed:                                                                                                                                                       
@import "bootstrap/scss/variables"; // from bootstrap node_module                                                                                                          
^                                                                                                                                                                          
      File to import not found or unreadable: bootstrap/scss/variables                                                                                                     
Parent style sheet: /home/ciesielskico/Documents/Git/reports/node_modules/bootstrap-material-design/scss/_variables.scss                
      in /home/ciesielskico/Documents/Git/reports/node_modules/bootstrap-material-design/scss/_variables.scss (line 45, column 1)       
 @ ./~/bootstrap-material-design/scss/bootstrap-material-design.scss 4:14-148                                                                                              
 @ multi styles

angular-cli.json

"styles": [
                "../node_modules/bootstrap/scss/bootstrap-flex.scss",
                "../node_modules/bootstrap-material-design/scss/bootstrap-material-design.scss",
]

Dans la documentation de bootstrap-material-design, il est indiqué de mettre node_modules dans le includePath du sass-loader.

Est-ce possible avec la version actuelle d'angular-cli ? Si oui, comment ?

Answer 1

Solution de contournement

J'ai écrit un node script qui est exécuté comme npm post install. Fichiers webpack-build-production.js y webpack-build-development.js situé à node_modules/angular-cli/models/ doit contenir sassLoader et le script suivant l'ajoutera automatiquement.

var fs = require('fs');

const FILES = [
  "node_modules/angular-cli/models/webpack-build-production.js",
  "node_modules/angular-cli/models/webpack-build-development.js"
];

const ADDITIONAL_LINES = "\
        ,sassLoader: {\n\
            includePaths: [path.resolve(\"node_modules/bootstrap-sass/assets/stylesheets\")]\n\
        }\n\
    };\n";

FILES.forEach(function (file) {
  var text = fs.readFileSync(file, "utf8");
  var alreadyEdited = false;
  var content = "";

  text.split(/\r?\n/).forEach(function (line) {
    if (line.indexOf('sassLoader') !== -1) {
      alreadyEdited = true;
    }

    if (line.indexOf(' };') !== -1) {
      content += ADDITIONAL_LINES;
    } else {
      content += line + "\n";
    }
  });

  if (!alreadyEdited) {
    console.log('File is being adjusted by fix script. ', file);
    fs.writeFileSync(file, content, 'utf8');
  }
});

Answer 2

Je ne sais pas si vous avez réussi à faire fonctionner ce système, mais pour tous ceux qui le recherchent (ng-cli avec Bootstrap et SCSS).

Jetez un coup d'œil à ceci Question et définir l'extension de style par défaut du préprocesseur à scss .

Node-sass ou tout autre chargeur n'est pas nécessaire à l'installation. Il fonctionne avec la petite modification de l'extension par défaut.

Ensuite, vous pouvez ajouter le style bootstrap en tant qu'importation dans le fichier styles.scss . (il suffit de changer l'extension du styles.css par défaut)

styles.scss

@import "../node_modules/bootstrap/scss/bootstrap.scss";

Il est également possible de l'ajouter à app.component.ts como styleUrls: ['./app.component.css', '../../node_modules/bootstrap/scss/bootstrap.scss'] et ajouter encapsulation: ViewEncapsulation.None à l'annotation du composant pour appliquer le bootstrap de manière globale.

Je préfère l'approche styles.scss car je pense que ce fichier est destiné aux styles globaux.