webpack 实时热重载 sass [英] webpack live hot reload for sass

问题描述

我正在为 React Starter 构建工作流，并希望在更改 scss 文件时自动重新加载浏览器.

目前，当我对 index.js 文件(设置为我的入口点)进行更改时，webpack 将热重载.但是，当我在 scss 文件中更改/添加 scss 代码时，它会被编译，但 css 不会在任何地方获得输出，也不会触发浏览器重新加载.

我是 webpack 的新手，非常感谢这里的一些见解.

这是我的 webpack.config.js

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const ExtractTextPlugin = require('extract-text-webpack-plugin');模块.出口 = {条目:['./src/js/index.js', './src/scss/style.scss'],输出: {路径:path.join(__dirname, 'dist'),文件名:'js/index_bundle.js',},模块: {规则: [{测试:/\.js$/,排除:/node_modules/，用: {loader: 'babel-loader'}},{测试:/\.css$/,使用: ['style-loader', 'css-loader']},{测试:/\.scss$/,用: [{加载器:'文件加载器'，选项: {名称:'[名称].css'，输出路径:'css/'}},{装载机:'提取装载机'},{装载机:'css-装载机'},{loader: 'postcss-loader'},{loader: 'sass-loader'}]}]},插件: [新的 HtmlWebpackPlugin({模板:'./src/index.html'})]}

我的 index.js 入口点文件

从'react'导入React；从 'react-dom' 导入 ReactDOM；从'../components/App'导入应用程序；ReactDOM.render(<应用程序/>,document.getElementById('App'));

还有我的应用组件

import React, {Component} from 'react';导入'../../dist/css/style.css';类 App 扩展组件 {使成为() {返回 (<div><p>测试</p>

)}}导出默认应用程序；

解决方案

实际上，style-loader 就是 负责 CSS HMR.

您应该将它添加到样式管道的末尾，仅适用于开发人员.对于生产，您可以保留您的配置.

它应该看起来像这样:

const devMode = process.env.NODE_ENV !== '生产'{测试:/\.scss$/,用: [开发模式?'style-loader' : MiniCssExtractPlugin.loader,{装载机:'css-装载机'},{loader: 'postcss-loader'},{loader: 'sass-loader'}]}

注意，将css提取到单独的文件中的最佳做法是使用MiniCssExtractPlugin 如果你使用的是 webpack 4，或者 ExtractTextWebpackPlugin，如果你使用的是 webpack <4.

I am building a workflow for a react starter and would like to have my browser auto reload when I make a change to my scss files.

Currently, webpack will hot reload when I make a change in my index.js file (set as my entry point). However when I change/add scss code in my scss file, it gets compiled, but the css doesn't get output anywhere and does not trigger a browser reload.

I am new to webpack would really appreciate some insight here.

Here is my 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'    
        })
    ]
}

My index.js entry point file

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


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

And my App component

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



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

export default App;

解决方案

Actually, style-loader is the one that is responsible for CSS HMR.

You should add it at the end of the style pipeline, only for dev. For production, you can remain your config.

It should look something like that:

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

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

Pay attention, the best practice of extracting css into a separate file is to use MiniCssExtractPlugin if you are using webpack 4, or ExtractTextWebpackPlugin, if you are using webpack < 4.

这篇关于webpack 实时热重载 sass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！