Comment ajouter sass à webpack + réagir?

Question

Comment ajouter correctement sass (dans jsx import 'style.sass') dans un webpack de configuration + réagir?

var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, './'); 
var APP_DIR = path.resolve(__dirname, 'src/'); 

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
     path: BUILD_DIR, 
     filename: 'bundle.js' 
    }, 
    devServer: { 
     contentBase: BUILD_DIR 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?/, 
       include: APP_DIR, 
       loader: 'babel-loader' 
      } 
     ] 
     , 
     rules: [{ 
      test: /\.scss$/, 
      use: [{ 
       loader: "style-loader" // creates style nodes from JS strings 
      }, { 
       loader: "css-loader" // translates CSS into CommonJS 
      }, { 
       loader: "sass-loader" // compiles Sass to CSS 
      }] 
     }] 
    } 
}; 

module.exports = config; 

Erreur:

ERROR in ./src/index.jsx Module parse failed: C:\Users\steko\Desktop\TEST\m-react\src\index.jsx Unexpected token (9:8) You may need an appropriate loader to handle this file type. | render() { | return (| | Hello React Project!!! |

git

Answer 1

Dans vos modules section webpack font ce

module: { 
    rules: [ 
     { 
      test: /\.jsx?/, 
      loader: 'babel-loader', 
      include: APP_DIR 
     }, 
     { 
      test: /\.scss$/, 
      use: ExtractTextPlugin.extract({ 
       fallback: "style-loader", 
       use: "css-loader!sass-loader", 
      }) 
     } 
    ] 
} 

Ensuite, dans votre région plugins dans votre code webpack faire ce

plugins: [ 
    new ExtractTextPlugin('style.css'), 
] 

Vous aurez besoin de ce paquet extract-text-webpack-plugin

S'il vous plaît faites-moi savoir si vous avez encore des questions.

Answer 2

Le ExtractTextPlugin au-dessus de moi, sert à extraire votre code js et votre code CSS en deux fichiers distincts. C'est génial, mais je ne suis pas sûr que ce soit ce que vous vouliez dire.

C'est ainsi que j'analyse les fichiers sass dans ma compilation webpack. Je peux plus tard décider si je laisse le CSS dans mon fichier js ou l'extraire.

loaders: [ 
     { 
      test: /\.scss$/, 
      loader: "style-loader!css-loader!sass-loader" 
     } 
] 

les chargeurs sont appliqués droite à gauche si:

• analyse syntaxique du fichier SASS
• puis en appliquant le chargeur css
• et enfin le style chargeur

dans le fin, vous aurez votre code CSS dans votre fichier de sortie js prêt à l'emploi, comme tout autre fichier CSS que vous chargez.