web-dev-qa-db-fra.com

Webpack Live Hot Reload pour Sass

Je crée un flux de travail pour un démarreur réactif et j'aimerais que mon navigateur se recharge automatiquement lorsque je modifie mes fichiers scss.

Actuellement, webpack se rechargera à chaud lorsque j'apporterai une modification à mon fichier index.js (défini comme mon point d'entrée). Cependant, lorsque je modifie/ajoute du code scss dans mon fichier scss, il est compilé, mais le css n'est généré nulle part et ne déclenche pas de rechargement du navigateur.

Je suis nouveau sur webpack apprécierais vraiment quelques informations ici.

Voici mon webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: ['./src/js/index.js', './src/scss/style.scss'],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/index_bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].css',
                            outputPath: 'css/'
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'    
        })
    ]
}

Mon fichier de point d'entrée index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from '../components/App';


ReactDOM.render(
    <App/>,
    document.getElementById('App')
);

Et mon composant d'application

import React, {Component} from 'react';
import '../../dist/css/style.css';



class App extends Component {
    render() {
        return (
            <div>
                <p>Test</p>         
            </div>
        )
    }
}

export default App;
javascriptwebpacksasswebpack-dev-serverhot-reload
7
Vladimir Mujakovic

Réellement, style-loader est celui qui est responsable pour CSS HMR.

Vous devez l'ajouter à la fin du pipeline de style, uniquement pour le développement. Pour la production, vous pouvez rester votre config.

Cela devrait ressembler à quelque chose comme ça:

const devMode = process.env.NODE_ENV !== 'production'

{
  test: /\.scss$/,
  use: [
    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader'
    },
    {
      loader: 'postcss-loader'
    },
    {
      loader: 'sass-loader'
    }
  ]
}

Faites attention , la meilleure pratique pour extraire css dans un fichier séparé est d'utiliser MiniCssExtractPlugin si vous êtes en utilisant webpack 4, ou ExtractTextWebpackPlugin , si vous utilisez webpack <4.

9
felixmosh

Essayez d'utiliser Parcel au lieu de Webpack. J'avais l'habitude de passer des heures à configurer Webpack pour que des choses comme le rechargement à chaud fonctionnent. Avec Parcel, la plupart des choses "fonctionnent" sans fichier de configuration. Par exemple, je voulais commencer à utiliser des modèles Pug. Parcel a reconnu le .pug extension et téléchargé automatiquement les dépendances NPM requises!

Dans votre cas, incluez simplement le fichier SCSS dans votre application comme ceci: import '../scss/style.scss' (notez que le chemin est vers le .scss fichier source relatif à index.js). Le colis fera automatiquement la chose "sensée".

Voici quelques références pour commencer avec Parcel + React + SASS:

Avantages et inconvénients notables de Parcel vs WebPack:

  • Le colis nécessite une configuration minimale; souvent pas de configuration.
  • Parcel se construit généralement beaucoup plus rapidement que WebPack.
  • Le serveur de développement WebPack semble plus stable. (Le serveur de développement Parcel doit redémarrer de temps en temps et ne joue pas Nice avec Dropbox. Apparemment, cela devrait être corrigé dans la version 2.0.)
  • Lorsqu'une configuration (inhabituelle) est requise, il n'est peut-être pas évident de savoir comment procéder dans Parcel; au moins dans WebPack, toute la configuration est au même endroit.
  • Parfois, la configuration automatique de Parcel fait quelque chose que les gens n'attendent pas, les confondant.
0
Leftium
npm install --save-dev style-loader CSS-loader
npm install --save-dev html-webpack-plugin

ajoutez un script npm dans le package.json pour exécuter le serveur webpack-dev:

"scripts": { 
  "start": "webpack-dev-server" 
},

Webpack a besoin d'un fichier de configuration pour savoir comment gérer les différents types de dépendances que vous utilisez dans notre application, et pour ce faire, créez un fichier appelé webpack.config.js, ajoutez trois attributs dans webpack.config.js: le premier est , qui indique à Webpack où se trouve le fichier principal de notre application:

entry: './index.js'

Le second est le module, qui est l'endroit où nous indiquons à Webpack comment charger les dépendances externes. Il a un attribut appelé chargeurs, où nous définissons un chargeur spécifique pour chacun des types de fichiers:

module: { 
 loaders: [ 
{ 
  test: /\.js$/, 
  exclude: /(node_modules|bower_components)/, 
  loader: 'babel', 
  query: { 
    presets: ['es2015', 'react'], 
  } 
}, 
{ 
  test: /\.css$/, 
  loader: 'style!css?}]}

Nous disons que les fichiers qui correspondent à l'expression régulière .js sont chargés à l'aide du chargeur de babel afin qu'ils soient transpilés et chargés dans le bundle. La deuxième entrée dans le tableau des chargeurs indique à Webpack quoi faire lorsqu'un fichier CSS est importé, et il utilise le css-loader avec l'indicateur de modules activé pour activer les modules CSS. Le résultat de la transformation est ensuite transmis au chargeur de style, qui injecte les styles dans le haut de la page.

Enfin, nous activons le plugin HTML afin de générer la page pour nous.

const HtmlWebpackPlugin = require('html-webpack-plugin') 

plugins: [new HtmlWebpackPlugin()]
0
Yilmaz