將 webpack（環境）變量傳遞給 scss 文件

Question

對 webpack 非常陌生...我希望能夠讀取一個值，在這種情況下，特別是sass文件中webpack.config.js中env的值，因此我可以根據環境使用不同的 css。

例如：

• env = 發展，顏色 = 綠色
• env = 生產，顏色 = 藍色

到目前為止，我一直專注於 sass-loader，試圖傳遞數據，但沒有奏效，當我運行npm run build:Debug （這運行webpack --app=all --env=development ）時， $env變量始終未定義.

這些是我擁有的文件：

webpack.config.js

 const path = require("path"); const common = require("./.webpack/webpack.common.config"); const config = []; function addAppConfig(app) { app.module = common.module; app.resolve = common.resolve; config.push(app); } module.exports = (env, argv) => { switch (argv.app) { // Add new configs to below case "a": addAppConfig(aa); break; case "b": addAppConfig(bb); break; case "c": addAppConfig(cc); break; default: case "all": addAppConfig(xyz); } switch (env) { case "local": config.forEach(appConfig => { // The "development" mode configuration option tells webpack to use its built-in development optimizations // https://webpack.js.org/configuration/mode/#mode-development appConfig.mode = "development"; appConfig.output.path = path.resolve(__dirname, "../dist"); appConfig.output.publicPath = "http://localhost:3000/dist"; appConfig.devtool = "inline-source-map"; appConfig.devServer = { contentBase: path.resolve(__dirname, "./public"), port: "3000", watchContentBase: true }; }); break; case "development": config.forEach(appConfig => { // The "development" mode configuration option tells webpack to use its built-in development optimizations // https://webpack.js.org/configuration/mode/#mode-development appConfig.mode = "development"; appConfig.devtool = "inline-source-map"; }); break; default: case "production": config.forEach(appConfig => { // The "production" mode configuration option tells webpack to use its built-in production optimizations including minification etc. // https://webpack.js.org/configuration/mode/#mode-production appConfig.mode = "production"; appConfig.devtool = "cheap-source-map"; }); break; } return config; };

webpack.common.config.js - 在 webpack.config.js 中使用

 module.exports = { module: { rules: [ { test: /\\.jsx?$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /\\.(s*)css$/, use: [ { loader: "file-loader", options: { name: "[name].css" } }, "extract-loader", "css-loader", "sass-loader" ] }, { test: /\\.(png|jp(e*)g)$/, use: [ { loader: "url-loader", options: { // Convert images < 8kb to base64 strings limit: 8000, name: "images/[name].[ext]" } } ] }, { test: /\\.(svg)$/, use: [ { loader: "url-loader", options: { // 80kb limit to avoid an IE11 display bug limit: 80000, name: "images/[name].[ext]" } } ] }, { test: /\\.(woff|woff2|eot|ttf)$/, use: [ { loader: "url-loader", options: { // Convert images < 8kb to base64 strings limit: 8000, name: "fonts/[name].[ext]" } } ] } ] }, resolve: { extensions: [".js", ".jsx"] } };

最后：document.scss

 .aside__left, .aside__right { @if $env == 'development' { background-color: red; } @else { background-color: green; } background-color: $desiredColor; }

有沒有辦法讓 scss 變量映射/從 webpack 配置傳遞，或者任何其他基於環境的方式，會生成不同的 css？

Answer 1

您可以使用以下方法將變量從 webpack 配置傳遞到 scss 文件：

{
    loader: "sass-loader",
    options: {
        data: "$var1: " + yourVar1+ ";"
    }
}

(c) https://github.com/webpack-contrib/sass-loader/issues/49#issuecomment-284131561

Answer 2

這個問題已經得到回答並且是正確的，但實際上我搜索了很多以確定如何在 SASS 文件中使用它並將 SASS 與 webpack env 連接。 我想將其添加到我的答案中。

包.json

這里我們在 webpack.config.js 中添加 NODE_ENV 變量。 將 env 添加到 package.json 中，請參考： webpackenvironmentconfiguration

"build:dev": "webpack --env.NODE_ENV=dev --config  webpack.config.js --progress",

webpack.config:

現在，在此處添加您要根據環境使用的變量。 就像，我想將環境添加到我的背景圖像的動態 url 中。

{
    loader: "sass-loader",
    options: {
        data: "$var1: " + env.NODE_ENV + ";"
    }
}

_variables.scss

您可以通過任何一種方式在 .sass 文件中使用它：

$image-url: "https://" + $var1 + ".mysite.net/images/ping.jpg"; or

$image-url: "https://#{$var1}.mysite.net/images/ping.jpg";

輸出

您的輸出網址將是這樣的：

https://dev.mysite.net/images/ping.jpg