[開発環境]webpack(7)

Sass

伝播の一生性をテストする

// app.js:
import './style.scss';

let myFirstPromise = new Promise((resolve, reject) => {
    // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.
    // In this example, we use setTimeout(...) to simulate async code.
    // In reality, you will probably be using something like XHR or an HTML5 API.
    setTimeout(function(){
      resolve("Success!"); // Yay! Everything went well!
    }, 5000);
});


myFirstPromise.then((successMessage) => {
    // successMessage is whatever we passed in the resolve(...) function above.
    // It doesn't have to be a string, but if it is only a succeed message, it probably will be.
    console.log("Yay! " + successMessage);
});

// style.scss:
$body-color: red;

body {
    color: $body-color;
}

Webパッケージ設定ファイルと結果

// webpack.config.js:
module.exports = {
  module: {
    rules: [
      {
        test: /\.(s[ac]ss|css)$/, // sass(scss), css 확장자로 끝나는 모든 파일을 의미
        use: [
          process.env.NODE_ENV === "production"
          ? MiniCssExtractPlugin.loader
          : "style-loader",
          "css-loader",
          "sass-loader"
        ],
      },
    ],
  },
}

Reference