Sie können einen geeigneten Lader müssen diesen Dateityp behandeln

Question

Ich erhalte, was es scheint einen fehlenden loader Fehler bei dem Versuch, SASS mit webpack zu verwenden und react.js

ich den Code in webpack geändert habe:

// webpack.config.js 
var webpack = require('webpack') 

if(process.env.NODE_ENV === 'development'){ 
    var loaders = ['react-hot','babel'] 
} else { 
    var loaders = ['babel'] 
} 
module.exports = { 
    devtool: 'eval', 
    entry: './app-client.js', 
    output: { 
    path: __dirname + '/public/dist', 
    filename: 'bundle.js', 
    publicPath: '/dist/' 
    }, 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     loaders: loaders, 
     exclude: /node_modules/ 
    }, 
    { 
    test: /\.scss$/, 
    loaders: ["style", "css", "sass"] 
    } 
    ]}, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     'process.env.COSMIC_BUCKET': JSON.stringify(process.env.COSMIC_BUCKET) 
    }) 
] 
}; 

Innen ./components/App.js ich habe folgendes:

//styles 
import style from '../styles/footer.scss' 

im Inneren des ./components/partials/Footer.js I modifiziert, um den className Wert auf den fo llowing: <footer className={ style.foo }>. Doch jetzt die Seite geladen wird leer mit dem folgenden Fehler:

Footer.js:28 Uncaught (in promise) ReferenceError: style is not defined

ich dann den Import in der Footer.js Komponente bewegt:

import style from '../../styles/footer.scss'

Aber jetzt bin ich immer: ReactReconciler.js:54 Uncaught TypeError: Cannot read property 'getNativeNode' of null

Wo importiere ich Stil?

Answer 1

die sass dort zum Mitnehmen, der Config wie dieses ich mit Ihrer Linie die oben tat, ersetzt

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