使用 Webpack（和本地作用域类名）编译 Sass

Question

我花了几个小时试图让我的 Webpack 配置来编译 Sass；这有点荒谬。在我的研究过程中，我发现了几十个 Github 问题、Stackoverflow 帖子和博客，它们都在谈论如何将 Sass 与 Webpack 结合使用，而且它们的做法都不同。此外，有很多人有问题。我只是认为 Webpack 需要有更好的文档记录。呃。

我想出了如何编译 Sass 并让 Webpack 从 /static 在内存中提供它，但我希望类名是本地范围的。这难道不是模块化 CSS 和 React 组件的好处之一吗？

本地范围示例：.foo__container___uZbLx {...}

所以，这是我的 Webpack 配置文件：

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')
            }
        ]
    }
};

我设法让它为 vanilla CSS 工作：

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

我不太了解带有所有 ? 标记的类似参数的语法，而且我不知道要搜索什么才能找到与此相关的文档。

这就是我的 React 组件的样子；只是以防你想看看我是如何导入样式的：

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;

另外，我有三个不相关的问题：

• 如果 Webpack 仅通过 /static 从内存中提供文件，那么 output.path 属性有什么意义？
• 如果我在这里所做的足够了，webpack-dev-server 的意义何在？据我了解，webpack-dev-server 只是用于热模块更换的东西，对吧？只是自动刷新？
• 我的exclude 和include 属性是多余的吗？据我了解，排除node_modules 会减少编译时间，使其工作得更快；需要处理的文件更少。

Answer 1

我得到了它的工作：

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

我所要做的就是将!sass 放在查询的末尾。我希望这些东西有更好的记录；在任何地方都找不到足够的文档...