Currently, I am integrating .SASS into a single .CSS file using webpack. When I execute "webpack" in the terminal, it successfully exports the file. However, when I use "webpack-dev-server", it detects the changes but does not generate or update the output .CSS file:
var webpack = require('webpack');
var path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://127.0.0.1:8080/',
'webpack/hot/only-dev-server',
'./src'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js', // final .js file export
publicPath: '/public'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
},
{
test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') // SASS loading configuration
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin("./bundle.css") // CSS file export configuration
],
resolve: {
modulesDirectories: ['node_modules', 'src'],
extensions: ['', '.js', '.scss'],
root: [path.join(__dirname, './src')]
}
};
Although it functions as expected with just "webpack," I am curious about how to trigger the file generation process using the server. This way, I can avoid manually entering commands in the terminal each time I need to update the styles.