使用classlist.add应用的样式不应用于浏览器，但会添加类.与Webpack捆绑的代码

Question

我正在尝试将一个小项目转换为使用webpack。我对webpack很陌生，这是我第一次使用webpack。我遇到的情况是，基于事件动态运行的classlist.add方法确实将类添加到了dom中，但样式没有得到应用。请注意，这个css过去在没有webpack的情况下使用sass编译器手动工作。

这是我的源代码

class ThemeSetter{    
constructor(buttonId){
this.themeButton = document.getElementById(buttonId);
this.themeSwitchHandler();
}
themeSwitchHandler = ()=>{
this.themeButton.addEventListener("click",()=>{
const html = document.querySelector("html");
const theme = html.dataset.theme;
if(theme == 'dark'){
html.dataset.theme = 'light';
this.themeButton.classList.remove('toggleDark');
}
else{
html.dataset.theme = 'dark';
this.themeButton.classList.add('toggleDark');
}
});
}
}
new ThemeSetter("darkMode");

#darkMode{
cursor:pointer;
color:grey;
height:2rem;
width:2rem;
text-align:center;
line-height: 2rem;
border-radius:5px;
i{
transition: transform .5s ease-in-out;
}
&.toggleDark i{
color:green;
transform: rotate(180deg);
}
}

<div id="darkMode"><i class="fas fa-adjust"></i></div>

这是Webpack通用配置文件

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const bodyParser = require("body-parser");
module.exports = {
entry: {
loader: path.resolve(__dirname,"/src/js/pageload.js"),
main: path.resolve(__dirname,"/src/js/index.js"),
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname,"/src/indexT.php"),
filename: "index.php",
inject: "body",
cache: "false",
}),
],
module: {
}
}

这是WebPack开发人员配置文件

const path = require("path");
const common = require("./webpack.common");
const {merge} = require("webpack-merge");
module.exports = merge(common,{
mode: "development",
output:{
filename:'[name].bundle.js',
path: path.resolve(__dirname,"dev"),
clean:true,
assetModuleFilename : 'img/[name][ext]',
},
module:{
rules:[
{
test: /.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
}
]
}
});

这是index.js文件

import {App} from "./modules/App";
import "../css/body.scss";
import '@fortawesome/fontawesome-free/js/fontawesome'
import '@fortawesome/fontawesome-free/js/solid'
import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/brands'
importAll(require.context('../img', false, /.(png|jpe?g|svg)$/));
App.init();
function importAll(r) {
return r.keys().map(r);
}

我的猜测是，这与SCSS编译有关，但我观察到，所需的css在main.bundle.js.中已成功预处理

#darkMode {\n  cursor: pointer;\n  color: var(--grey-font);\n  height: 2rem;\n  width: 2rem;\n  text-align: center;\n  line-height: 2rem;\n  border-radius: 5px; }\n  #darkMode i {\n    transition: transform .5s ease-in-out; }\n  #darkMode.toggleDark i {\n    color: green;\n    transform: rotate(180deg); }

请注意，我没有使用webpack-dev服务器，因为我使用的是PHP后端。

Answer 1

我想明白了。我在上面发布的SCSS代码选择具有类"I"的父级的"I"后代；toggleDark"；。然而，当通过JS导入导入FontAwesome时，经过webpack预处理后；i〃；元素替换为SVG。因此没有应用样式。所以我把SCSS代码改成了

#darkMode{
cursor:pointer;
color:var(--grey-font);
height:2rem;
width:2rem;
text-align:center;
line-height: 2rem;
border-radius:5px;
svg{
transition: transform .5s ease-in-out;
}
&.toggleDark svg{
color:green;
transform: rotate(180deg);
}
}

然后就成功了！很抱歉出了问题