With over 15 years of experience, I consider myself more of a traditionalist in this field. However, I must admit that the modern approach to separating concerns is far superior to the conventional method.
In the past, we used to compartmentalize layout, styling, and functionality (html, css, js) separately. While this made file organization easy, it often led to difficulties in locating specific code related to certain features. For example, a button could be spread across different files such as /src/shop-front.html, /src/css/shop-front.css, and /src/js/shop-front.js.
The new paradigm involves segregating concerns by components. Now, components like 'shop-front' are constructed from /src/components/button/ where all relevant files reside. This includes the javascript file incorporating the css style sheets.
The beauty of this approach is evident when you decide to replace 'button' with 'fancy-button'. Simply changing the import statement from import button from 'button' to
import button from 'fancy-button'
automatically removes the old code without requiring manual adjustments at various locations.
Regarding the points raised:
While node-sass may be faster, the marginal difference compared to webpack is negligible. The enhanced developer experience offered by the latter justifies any minimal time discrepancy.
Concerning the css/sass structure, there is no change in how it's built by requiring it from a javascript file. Whether using css modules is optional, I prefer sticking to sass and applying class names conventionally.
Although webpack configuration allows splitting the js config from the css config, the small size of the setup makes it unnecessary to complicate things further.
The simplicity and logic of my folder structure can be observed here:
https://i.sstatic.net/ziNGS.png
This represents a basic configuration for importing scss files:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const { SRC, DIST } = require('./src/config/paths');
module.exports = {
devtool: 'source-map',
cache: true,
context: SRC,
entry: {
app: [`${SRC}/client-entry.js`]
},
output: {
path: DIST,
filename: '[name]-[chunkhash].js',
publicPath: '/'
},
plugins: [
new ExtractTextPlugin('[name]-[contenthash].css'),
],
resolve: {
modules: ['node_modules', SRC],
extensions: ['.js', '.jsx', '.scss']
},
module: {
rules: [
{
test: /\.jsx?$/,
include: [/src/],
loader: 'babel-loader',
options: {
cacheDirectory: true
}
},
{
test: /\.s?css$/,
include: [/src/],
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'sass-loader']
})
}
]
}
};