Question

我花了好几个小时试图让我的Webpack配置来编译Sass;这有点荒谬。在我的研究过程中，我发现了许多Github问题，Stackoverflow帖子和博客，讨论如何在Webpack中使用Sass，而且他们都采用不同的方式。此外，有这么多人有问题。我只是认为Webpack需要更好地记录。啊。

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

本地范围的示例：.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仅通过output.path从内存中提供文件，那么/static属性的重点是什么？
如果我在这里所做的事情充足，那么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。我希望这些东西能更好地记录下来;无法在任何地方找到足够的文档...

使用Webpack（和本地范围类名）编译Sass

1 个答案: