Webpack 默默地不构建嵌套的 scss答案

【问题标题】：Webpack silently not building nested scssWebpack 默默地不构建嵌套的 scss
【发布时间】：2020-01-24 02:43:51
【问题描述】：

我有一个相当简单的 webpack 文件，它需要一些 typescript + scss 并对其进行处理。我注意到当我嵌套了 scss 时，webpack 根本不会将其转换为 css。我在转译文件中没有它的数据。但是当我有未嵌套的 scss 时，一切都按预期工作。

例如，这是我的 scss，它不是用我的 webpack 配置构建的。

.my-gallery {
  border: 2px solid red;
  &-img {
    border: 2px solid blue;
  }
}

但是，当我拥有这样的 scss 时，一切都会按预期进行。


    .my-gallery {
      border: 2px solid blue;
    }

    .my-gallery-img {
      border: 2px solid red;
    }

我的 webpack 配置有什么问题？下面我附上了我当前的配置和我的开发依赖项。

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: ["./app/main.ts"],
  watch: true,
  mode: "production",
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "static")
  },
  module: {
    rules: [
      {
        // Transform es6+ js & ts into es5 js.
        test: [/.js$|.ts$/],
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/typescript"]
          }
        }
      },
      {
        // Transform scss to css, minify it, apply autoprefixer via postcss
        test: [/.css$|.scss$/],
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
          "postcss-loader"
        ]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".ts"]
  },
  plugins: [
    new MiniCssExtractPlugin({
      //Writes all styles to a single style.css file.

      filename: "css/[name].css"
    })
  ]
};

"devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-typescript": "^7.3.3",
    "babel-loader": "^8.0.6",
    "autoprefixer": "^9.6.1",
    "webpack": "^4.36.1",
    "webpack-cli": "^3.3.6",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.12.0",
    "css-loader": "^3.1.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0"
  }

【问题讨论】：

标签： typescript webpack sass

【解决方案1】：

我想提供更新。我发现我在我的模板中发现了一些东西。我的 webpack 配置没有任何问题。

在我的模板中，我不小心将" 放在了类名中。

<div class="my-gallery">
  {{ range $i, $imgsrc :=  $.Page.Params.Images }}
  <div class="my-gallery-img""> <!-- right here --> 
    <img 
      class="lazy"
      src="/img/placeholder.png"
      data-src="{{$imgsrc}}" alt="">
  </div>
  {{ end }}
</div>

干杯

【讨论】：