webentwicklung-frage-antwort-db.com.de

Fügen Sie SASS zur ausgeworfenen Create-React-App-Konfiguration hinzu

Ich möchte .scss-Unterstützung in meiner App hinzufügen, die mit create -react-app erstellt wurde. 

Ich habe npm run eject ausgeworfen und die notwendigen Abhängigkeiten installiert: npm install sass-loader node-sass --save-dev

In config/webpack.config.dev.js fügte ich den Ladern dieses Snippet hinzu:

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

Der Anfang des Loaders-Arrays sieht nun so aus:

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"]
      },

Jetzt in meiner jsx, wenn ich versuche, die scss-Datei zu importieren:

import './assets/app.scss';

Ich bekomme einen Fehler: 

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

Daher muss meine Konfiguration falsch sein, da ich keine .scss-Dateien laden kann. Wie kann man die config so einstellen, dass .scss Dateien in ausgeworfenem create-react-app geladen werden

reactjssasswebpackcreate-react-app
11
bukowski

OK, ich habe die Lösung gefunden - geändert davon:

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

zu diesem:

{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
},

Und jetzt werden meine .scss-Dateien geladen !!

8
bukowski

Beim Versuch, sass in ein leeres Projekt zu integrieren, habe ich diesen article verwendet. Die dort vorgestellte Lösung funktionierte nicht und erhielt den gleichen Fehler wie im Betreff. In meinem Fall half style-loader durch require.resolve('style-loader') zu ersetzen:

 {
        test: /\.scss$/,
        include: paths.appSrc,
        loaders: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('sass-loader')]
  },
9
Greg Woz

Überprüfen Sie den ersten Loader. Zuerst werden alle Dateien abgerufen und die anderen Loader-Dateien werden ausgeschlossen

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

so hinzufügen

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

auszuschließen, scheint das gleiche Problem behoben zu haben, das ich hatte: D

9
Ayaz Hussein

Sie müssen wahrscheinlich verwenden

include: paths.appSrc,

option zum Aktivieren des Webpack Hot-Reload. So könnte das Konfigurationsschnipsel aussehen

{
    test: /\.scss$/,
    include: paths.appSrc,
    loaders: ['style', 'css', 'sass']
},
1
Achmedzianov Danilian

Überprüfen Sie diese Loader-Einstellungen auf die neuesten Versionen.

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

gemäß der letzten Konfiguration [CRA]

:: 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
      ]
  },
0
Venkat Ch