Scss + Pug + Webpack配置出现问题

问题描述

我对scss webpack处理有问题。 scss文件按原样复制到结果html，看起来未执行预处理器。 在结果html文件中，我在样式部分看到“＆”符号：

.container {
  margin-top: 120px;
  display: flex;
  justify-content: space-around;

  &__colors {
    display: flex;
    row-gap: 4px;
    flex-direction: column;
  }
}

代替：

.container {
  margin-top: 120px;
  display: flex;
  justify-content: space-around;
}
.container__colors {
    display: flex;
    row-gap: 4px;
    flex-direction: column;
}

在Chrome开发工具中，类名称为“ container__colors”的元素不会收到描述的样式。

原因是什么？

这是我的 webpack.config.js ：

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

module.exports = {
  mode: 'development',entry: '/src/UI_kit/colors_and_type/colors_and_type.pug',module: {
    rules: [
      {
        test: /\.js$/,exclude: /node_modules/,use: {
          loader: 'babel-loader',},{
        test: /\.pug$/,use: {
          loader: 'pug-loader',{
        test: /\.(png|svg|jpg|jpeg|gif)$/,use: ['file-loader'],{
        test: /\.(woff(2)?|ttf|eot|svg)$/,exclude: [path.resolve(__dirname,'src/fonts')],include: [
          path.resolve(__dirname,'/src/fonts/quicksand'),path.resolve(__dirname,'node_modules'),],{
        test: /\.s[ac]ss$/i,use: [
          'style-loader','css-loader','sass-loader',{
        test: /\.css$/,use: ['style-loader','css-loader'],plugins: [
    new HtmlWebpackPlugin({
      template: '/src/UI_kit/colors_and_type/colors_and_type.pug',}),};

解决方法

存在问题

条目：'/src/UI_kit/colors_and_type/colors_and_type.pug'

我替换为：

输入：“ / main.js”，

这部分也是错误的：

      {
        test: /\.(woff(2)?|ttf|eot|svg)$/,exclude: [path.resolve(__dirname,'src/fonts')],include: [
          path.resolve(__dirname,'/src/fonts/quicksand'),path.resolve(__dirname,'node_modules'),],use: ['file-loader'],},

我替换为：

      {
        test: /\.(woff|ttf|eot|svg)$/,