Kompilieren von Sass mit Webpack (und lokalen Klassennamen)

Question

Ich habe stundenlang versucht, meine Webpack-Konfiguration zur Kompilierung von Sass zu bekommen; es ist irgendwie lächerlich. Während meiner Recherchen fand ich Dutzende von Github-Ausgaben, Stackoverflow-Posts und Blogs, die darüber sprachen, wie man Sass mit Webpack benutzt, und alle machen es anders. Außerdem gibt es so viele Menschen mit Problemen. Ich denke nur, dass Webpack besser dokumentiert werden muss. Pfui.

Ich habe herausgefunden, wie man Sass kompiliert und Webpack von /static im Speicher bereitstellen lässt, aber ich möchte, dass die Klassennamen lokal begrenzt sind. Ist das nicht einer der Vorteile von modularem CSS mit React-Komponenten? Also, das ist meine Webpack Konfigurationsdatei .foo__container___uZbLx {...}

:

Beispiel lokal scoped

const webpack = require('webpack'); 
const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    devtool: 'source-map', 
    entry: { 
     bundle: './src/js/app' 
    }, 
    output: { 
     path: __dirname, 
     filename: '[name].js', 
     publicPath: '/static' 
    }, 
    plugins: [ 
     new webpack.optimize.OccurrenceOrderPlugin(), 
     new ExtractTextPlugin('[name].css', {allChunks: true}) 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       include: path.join(__dirname, 'src'), 
       loader: 'babel' 
      }, 
      { 
       test: /\.scss$/, 
       exclude: /node_modules/, 
       include: path.join(__dirname, 'src'), 
       loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass') 
      } 
     ] 
    } 
}; 

ich es geschafft, es zu bekommen für Vanille-CSS zu arbeiten:

{ 
    test: /\.css$/, 
    exclude: /node_modules/, 
    include: path.join(__dirname, 'src'), 
    loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]') 
} 

Ich verstehe die parameterähnliche Syntax nicht wirklich mit allen ? Marken und Ich weiß nicht, wonach ich suchen soll, um eine Dokumentation dazu zu finden.

So sieht meine React-Komponente aus; nur für den Fall Sie sehen wollen, wie ich den Stil am Import:

import React, { Component } from 'react'; 
import s from './foo.css'; 

class Foo extends Component { 
    render() { 
     return (
      <div className={s.container}> 
       <h1 className="title">Welcome!</h1> 
       <p className="body">This is a dummy component for demonstration purposes.</p> 
      </div> 
     ); 
    } 
} 

export default Foo; 

Auch ich habe drei nicht verwandte Fragen:

• Was ist der Sinn von output.path Eigenschaft ist, wenn Webpack lediglich die Datei aus dem Speicher dient mittels von /static?
• Was ist der Sinn von webpack-dev-server, wenn das, was ich hier tue, angemessen ist? Von meinem Verständnis, webpack-dev-server ist nur für Hot-Modul Ersatz Zeug, nicht wahr? Nur automatische Aktualisierung?
• Sind meine Eigenschaften exclude und include redundant? Aus meiner Sicht verringert das Ausschließen von node_modules die Kompilierungszeit und macht es schneller; weniger zu verarbeitende Dateien

Answer 1

Ich habe es mit diesem arbeiten:

loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[name]__[local]___[hash:base64:5]!sass') 

Alles, was ich tun musste, !sass am Ende der Abfrage gesetzt wurde. Ich wünschte, dieses Zeug wäre besser dokumentiert. kann nirgendwo eine passende Dokumentation finden ...