Solution: Add SCSS and Live Reload
KarlsDad opened this issue · 2 comments
KarlsDad commented
Edit webpack.config.js for SCSS (dont need Prepros) and Live-Reload
const { join } = require('path')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const chalk = require('chalk')
const extractCSS = new ExtractTextPlugin('../styles/styles.css')
module.exports = {
entry: ['./src/main.js', './styles/styles.scss'],
output: {
path: join(__dirname, '/dist/js/'),
filename: 'bundle.js',
},
mode: 'development',
performance: {
hints: false,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['env', 'react', 'stage-0'],
plugins: [
'react-html-attrs',
'transform-class-properties',
'transform-decorators-legacy',
'transform-react-jsx-source',
],
},
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
exclude: /node_modules/,
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
}),
},
],
},
plugins: [
// Specify output file name and path
extractCSS,
new BrowserSyncPlugin(
// BrowserSync options
{
proxy: 'http://localhost:3000/',
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: true,
}
),
new ProgressBarPlugin({
format:
' build [:bar] ' +
chalk.green.bold(':percent') +
' (:elapsed seconds)',
}),
],
watch: true,
}
mindfulme commented
Ok, solved - that works
mindfulme commented