javascript - sass 的 webpack 实时热重载
问题描述
我正在为反应启动器构建工作流程,并希望在我对我的 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');
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'
})
]
}
我的 index.js 入口点文件
import React from 'react';
import ReactDOM from 'react-dom';
import App from '../components/App';
ReactDOM.render(
<App/>,
document.getElementById('App')
);
还有我的 App 组件
import React, {Component} from 'react';
import '../../dist/css/style.css';
class App extends Component {
render() {
return (
<div>
<p>Test</p>
</div>
)
}
}
export default App;
解决方案
实际上,style-loader
是负责CSS HMR 的那个。
您应该将它添加到样式管道的末尾,仅用于开发。对于生产,您可以保留您的配置。
它应该看起来像这样:
const devMode = process.env.NODE_ENV !== 'production'
{
test: /\.scss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
}
请注意,将 css 提取到单独文件中的最佳做法是,MiniCssExtractPlugin
如果您使用的是 webpack 4,或者ExtractTextWebpackPlugin
,如果您使用的是 webpack < 4。
推荐阅读
- java - JUnit 5 中的 @TestInstance 注释有什么用?
- java - 在 Keycloak 中进行身份验证之前在服务器中设置请求标头
- bash - 如何删除除最后一个以外的所有目录
- java - 使用 @ClassRule 从套件运行单个测试失败
- xpath - xpath:如何获得下一个节点(兄弟姐妹)
- vb.net - VB.net 应用程序没有在其他机器上启动
- django - Django 函数在 Chrome、Opera 和 Microsoft Edge 中工作,但在 FireFox 中不工作
- kubernetes - kubernetes 如何在 pod 内获取集群域(如 svc.cluster.local)?
- java - java - 如何在java中使用单个反斜杠重新生成文件中的任何值
- php - Mysql 与 group 命令的 group 行冲突问题