[WEBPACK] sass-loader @import

Par Bingogo, il y a 8 ans

Javascript NodeJS

Bonjour,

Je suis en train d'essayer d'importer un projet dans webpack (je découvre..)

Tout fonctionne parfaitement. Mon fichier webpack.config.js génère tout ce que je lui demande.

Mais il me reste un problème que je n'arrive pas à résoudre c'est l'utilisation de @import dans .scss qui génèrent une erreur car node-sass n'arrive pas à trouver les fichiers

Voici l'erreur :

@import "_header.scss"; ^ File to import not found or unreadable: compass. Parent style sheet: stdin

Voici mon webpack.config.js avec un simple 'sass-loader' :

{ test: /\.scss$/, use: ['style-loader', cssLoader, 'sass-loader'] }

Puis avec un include includePaths (absolue, relatif toujours la même erreur) [https://github.com/webpack-contrib/sass-loader]:

{ test: /\.scss$/, use: ['style-loader', cssLoader, { loader: "sass-loader", options: { includePaths: [path.resolve('./scss')] } }] }

Toujours la même erreur avec :

includePaths: ['./scss'] includePaths: ['scss/'] includePaths: ['/var/www/testwebpack/scss/']

css.scss

@import "compass"; $color-nav: #0083ca; @import "_header.scss";

Mon arborescence :
|webpack.config.js
|scss|css.scss
|scss|_header.scss

La solution doit être surement simple car cette fonction @import est quasiement toujours utilisée.. Quelqu'un aurait-il une idée à me proposer pour m'aider ?

Merci pour votre aide !
Olivier

2 réponses

Bingogo, il y a 8 ans

Comme à chaque fois... Je trouve la solution en rédigeant mon problème.

Il fallait juste supprimer le @import "compass";

Avec un simple :

{ test: /\.scss$/, use: ['style-loader', cssLoader, 'sass-loader'] }

Et tout fonctionne !

J'éspère que cela servira à quelqu'un d'autre !

Bingogo, il y a 8 ans

Finalement, j'ai rencontré des erreurs avec les mixin.

Ma première piste était donc la bonne. Importer les mixin..

Ici le mixin-loader
[https://github.com/legend80s/mixin-loader]

npm install mixin-loader compass-mixins --save-dev

et le webpack.config.js

, { test: /\.scss$/, enforce: 'pre', use: 'mixin-loader' }, { test: /\.scss$/, use: ['css-loader', { loader: "sass-loader", options: { includePaths: [path.resolve(__dirname, './node_modules/compass-mixins/lib')] }] }