Problem with Scss+Pug+Webpack configuration

Question

I have a problem with scss webpack processing. scss file is copied to result html as is, looks like preprocessor was not executed. In result html file I see '&' symbols in style section:

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

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

instead of:

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

And in Chrome Dev Tools elements with class name 'container__colors' does not receive described styles.

What is the reason?

This is my 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'),
        ],
        use: ['file-loader'],
      },
      {
        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',
    }),
  ],
};

score 1 · Answer 1 · answered Oct 25 '20 at 19:27

Problem was in

entry: '/src/UI_kit/colors_and_type/colors_and_type.pug'

I replaced with:

entry: '/main.js',

And this part was wrong too:

      {
        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'],
      },

I replaced with:

      {
        test: /\.(woff|ttf|eot|svg)$/,
        use: ['file-loader'],
      },

Problem with Scss+Pug+Webpack configuration

1 Answers1