Ajouter le SASS de éjecté de création de réagir application de config

Je veux ajouter .scss soutien dans mon application, qui a été créé à l'aide de create-réagir-app.

J'ai fait éjecter npm run eject et installé les dépendances nécessaires: npm install sass-loader node-sass --save-dev

À l'intérieur de config/webpack.config.dev.js j'ai ajouté pour les chargeurs de cet extrait:

{
   test: /\.scss$/,
   include: paths.appSrc,
   loaders: ["style", "css", "scss"]
},

Donc le début de l'chargeurs tableau de maintenant ressemble à:

loaders: [
      //Process JS with Babel.
      {
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        loader: 'babel',
        query: require('./babel.dev')
      },
      //"postcss" loader applies autoprefixer to our CSS.
      //"css" loader resolves paths in CSS and adds assets as dependencies.
      //"style" loader turns CSS into JS modules that inject <style> tags.
      //In production, we use a plugin to extract that CSS to a file, but
      //in development "style" loader enables hot editing of CSS.
      {
        test: /\.css$/,
        loader: 'style!css!postcss'
      },
      //LOAD & COMPILE SCSS
      {
        test: /\.scss$/,
        include: paths.appSrc,
        loaders: ["style", "css", "scss"]
      },

Maintenant dans mon jsx lorsque j'essaie d'importer fichier scss:

import './assets/app.scss';

J'obtiens une erreur:

Uncaught Error: Cannot find module "./assets/app.scss"

Donc ma config doit être erronée, car je ne suis pas en mesure de charger .scss fichiers. Comment ajuster la configuration de la charge .scss fichiers dans éjecté create-react-app?

InformationsquelleAutor bukowski | 2016-11-08

Vérifier le premier chargeur, d'abord, il obtenir tous les fichiers et il exclut les autres chargeurs de fichiers

loaders: [
        {
            exclude: [
                /\.html$/,
                /\.(js|jsx)$/,
                /\.css$/,
                /\.json$/,
                /\.svg$/
            ],
            loader: 'url',
            query: {
                limit: 10000,
                name: 'static/media/[name].[hash:8].[ext]'
            }
        },

ainsi, l'ajout de

/\.sass$/,
/\.scss$/,

à exclure, semble que fixe le même problème que moi 😀

Merci mec. Droit à l'essentiel!
pas de problème, j'ai eu le même problème 😀

InformationsquelleAutor Ayaz Hussein

9

Lors de la tentative d'intégrer sass en vide réagir projet, j'ai utilisé ce l'article. La solution présentée, il n'y a pas de travail et a reçu la même erreur que dans le sujet.
Dans mon cas, le remplacement de style-loader avec require.resolve('style-loader') aidé:
```
 {
        test: /\.scss$/,
        include: paths.appSrc,
        loaders: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('sass-loader')]
  },
```
- Pouvez-vous expliquer votre exemple de code?
InformationsquelleAutor Greg Woz
8

OK, j'ai trouvé la solution a changé à partir de ce:
```
{
   test: /\.scss$/,
   include: paths.appSrc,
   loaders: ["style", "css", "scss"]
},
```
à ceci:
```
{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
},
```
Et maintenant mon .scss fichiers sont en cours de chargement!!
- ou { test: /\.scss$/, include: path.appSrc, loaders: [ 'style-loader', 'css-loader', 'sass-loader'] }, a fonctionné pour moi
InformationsquelleAutor bukowski
1

Vous avez probablement utiliser
```
include: paths.appSrc,
```
option pour activer webpack chaud recharger. Si vous config extrait pourrait ressemble
```
{
    test: /\.scss$/,
    include: paths.appSrc,
    loaders: ['style', 'css', 'sass']
},
```
InformationsquelleAutor Achmedzianov Danilian

Vérifier ce chargeur de paramètres pour les dernières versions.

{
     test: /\.scss$/,
     use: [
         "style-loader", //creates style nodes from JS strings
         "css-loader", //translates CSS into CommonJS
         "sass-loader" //compiles Sass to CSS
    ]
}

InformationsquelleAutor Andrew Bazilskiy

conformément à la Dernière Configuration [ARC]

::webpack.config.dev.js::

{
    test: /\.css$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          //Necessary for external CSS imports to work
          //https://github.com/facebookincubator/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', //React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
          ],
        },
      },
    ],
  },
  {
    test: /\.scss$/,
    loaders: [
        require.resolve("style-loader"), //creates style nodes from JS strings
        require.resolve("css-loader"), //transl ates CSS into CommonJS
        require.resolve("sass-loader") //compiles Sass to CSS
      ]
  },

InformationsquelleAutor Venkat Ch

Vous devez vous connecter pour publier un commentaire.