It's been a long journey trying to configure my Webpack setup to compile Sass, and the process has become quite overwhelming. In my quest for answers, I encountered numerous Github issues, Stackoverflow threads, and blog posts discussing how to integrate Sass with Webpack, each with its own unique approach. The sheer number of people encountering problems only reinforces my belief that Webpack's documentation needs improvement. Sigh.
After successfully configuring Webpack to compile Sass and serve it from /static, I realized that I want the class names to be locally scoped. Isn't that one of the advantages of using modular CSS with React components?
Here's an example of locally scoped class names: .foo__container___uZbLx {...}
Let me share my Webpack configuration file:
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')
}
]
}
};
While I managed to make it work for regular 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]')
}
Despite my success, I find the parameter-like syntax with all the ? marks confusing, and I'm unsure of where to look for documentation on this topic.
In case you're interested, here's what my React component looks like, showcasing how I import the styles:
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;
Furthermore, I have three unrelated questions:
- What's the purpose of the
output.pathproperty if Webpack only serves the file from memory via/static? - Is
webpack-dev-servernecessary for the current setup, as it seems to focus on hot module replacement and automatic refreshing? - Are my
excludeandincludeproperties redundant? Does excludingnode_modulesimprove compilation time, reducing the processing load?