2016-05-09 11 views
5

Esplorando il angular-cli per RC1 di Angular2 rilasciato di recente ho affrontato strano problema: node-sass all'interno di plug-sass nel angular-cli non analizza ~ prima che il nome del pacchetto lancio seguente errore: Node-sass non capisce tilde

Error: File to import not found or unreadable: [email protected]/core/style/theme-functions 

succede durante la compilazione del seguente codice:

@import "[email protected]/core/style/theme-functions"; 

Se rimuovo tilde tutto sarà ok. È il comportamento giusto o esiste un percorso per rendere node-sass comprensibile allo ~?

P.S. Uso WebStorm e preferisco usare anche ~. Se la tilde viene omessa, si lamenta per l'impossibilità di risoluzione del percorso. E dopo un po 'di ricerca su Google ho scoperto che l'uso del codice senza tilde è legacy e lo ~ dovrebbe essere usato come best practice. È giusto?

+0

percorso Tilde risolvere è qualcosa che webpack fa, nodo-sass non ha una tale resolver costruito in. sass-loader per webpack ha questo, ma non con quello strano simbolo '@'. Puoi comunque scrivere la tua risoluzione di importazione - https://github.com/sass/node-sass#importer--v200---perimentale –

+0

@DominicTobias, grazie, funziona. Puoi scriverlo come risposta? Informazioni su '@' -symbol - è una parte del nome del pacchetto npm suddivisa in parti che vengono scaricate separatamente. Per esempio. Il pacchetto 'angular2' è stato diviso in' @ angular/core', '@ angular/http' ecc. In termini di node-sass è solo una parte del nome della cartella. – Lodin

+0

ah capisco - e certo, grazie –

risposta

15

La risoluzione del percorso di tilde è qualcosa che il webpack fa, nodo-sass non ha un resolver incorporato. sass-loader per webpack ha questo. È possibile write your own import resolution in alternativa.

Solo per completezza ecco come si potrebbe farlo senza webpack/sass-loader utilizzando un importatore personalizzato:

function importer(url, prev, done) { 
    if (url[0] === '~') { 
    url = path.resolve('node_modules', url.substr(1)); 
    } 

    return { file: url }; 
} 
+0

Hai bisogno di aggiungere un assegno per assicurarti che il 2 ° carattere nell'URL sia _non_ una barra in avanti per evitare l'elaborazione di URL che iniziano con '~/file'? Quindi forse ... 'if (url [0] === '~' && url [1]! == '/')'? – Todd

+0

Come in '~ /' che rappresenta la directory home sul computer degli utenti? Personalmente mi andrebbe bene con la risoluzione '~/file' su'./Node_modules/file' ancora –

+1

corretta. Immagino dipenda dall'ambiente in cui stai usando Node-Sass. La mia comprensione è che webpack, Angular CLI e altri stanno usando "~ /" per fare riferimento a root app ... quindi probabilmente è solo una cosa da considerare quando si crea un importatore. FWIW ai futuri googler, sass-loader sembra controllare la "/" nella loro implementazione: https://github.com/webpack-contrib/sass-loader#imports – Todd

Problemi correlati