SASS nicht im React/Webpack Projekt

Question

Ich habe SASS zu meinem Projekt hinzugefügt, weil ich gerne SASS für mein CSS benutze. In meinem App-Ordner habe ich einen CSS-Ordner und einen SCSS-Ordner erstellt. Ich laufe sass --watch scss: css, um über meine scss-Änderungen in den css-Ordner zu mappen. Das funktioniert großartig, denke ich. In meinem Webpack habe ich einen Loader hinzugefügt, um SCSS und SASS zu bearbeiten und die Dateien, die ich brauche, zu meinem package.json hinzuzufügen. Um die SASS-Styles zu verwenden, muss ich sie in meine index.html-Datei aufnehmen oder muss ich sie in jede Komponente importieren, die ich mit dem neuen es6-Import-X von "xpath" verwenden möchte?

Hier sind meine package.json und webpack.config.js Dateien

{ 
    "name": "newaccount", 
    "version": "1.0.0", 
    "description": "a form submission for new accounts", 
    "main": "App.js", 
    "scripts": { 
    "start": "webpack-dev-server" 
    }, 
    "author": "---", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.4.1", 
    "react-dom": "^15.4.1", 
    "react-hot-loader": "^1.3.1", 
    "react-router": "^3.0.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.18.2", 
    "babel-loader": "^6.2.8", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "css-loader": "^0.26.1", 
    "html-webpack-plugin": "^2.24.1", 
    "node-sass": "^3.13.0", 
    "sass": "^0.5.0", 
    "sass-loader": "^4.0.2", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.13.3", 
    "webpack-dev-server": "^1.16.2" 
    } 
} 

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var path = require('path'); 


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
    entry: [ 
    './app/App.js' 
    ], 
    output: { 
    path: __dirname + '/public', 
    filename: "index_bundle.js" 
    }, 
    plugins: [HTMLWebpackPluginConfig], 
    devServer: { 
     inline:true, 
     contentBase: './public', 
     port: 3333 
    }, 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: "babel-loader" 
     }, { 
      test: /\.scss$/, 
      include: path.join(__dirname, "app"), 
      loaders: ["style", "css", "sass"] 
     }, 
     { 
       test: /\.scss$/, 
       loader: 'style!css!sass' 
      }] 
    } 
}; 

Meine Dateistruktur ist im Grunde ein App-Ordner und öffentliche Ordner. Innerhalb der App haben Sie Komponenten/Container/css/scss/utils und innerhalb von public sind nur die Dateien bundle.js und index.html.

Answer 1

Sie sollten keinen externen Sass-Befehl mit Webpack verwenden. Sie müssen den Sass-Inhalt in das Abhängigkeitsdiagramm von Webpack einfügen. Um dies zu tun, sagen Sie Webpack, dass Sie die Dateien verwenden, was mit require() gemacht wird. An der Spitze der Javascript-Datei für die Seite, um den Stil benötigen,

require('./path/to/sass/scss')

Im Entwicklungsmodus hinzufügen, dies wird Ihren Sass-Code in Javascript, die die integrierten CSS-Regeln in der Seite injiziert. Es ist merkwürdig, ich weiß, aber es gibt Ihnen heißes Nachladen von Stilen. Sie sollten auch eine separate Webpack-Konfiguration für die Erstellung erstellen, die das ExtractTextPlugin verwendet, um das erstellte CSS in eine separate Datei auszulagern, und diese Datei in Ihr Produktions-HTML laden.

Weiterführende Literatur: Webpack: When to Use and Why.

Answer 2

Meine webpack.config.js Datei SCSS und sass zweimal geladen wurde, wechselte er nach

{ 
    test: /\.scss$/, 
    loader: 'style!css!sass' 
}] 

von

{ 
    test: /\.scss$/, 
    include: path.join(__dirname, "app"), 
    loaders: ["style", "css", "sass"] 
}, 

Entfernen

Jetzt kann ich meine SASS Dateien enthalten in meine Komponenten reagieren. Jetzt muss ich herausfinden, wie ich auf meine Bilder innerhalb meiner SASS - Dateien zugreifen kann - scheint Massenfehler zu werfen = (