按环境渲染 css

Question

我想在 asp.net mvc 网站上切换到 webpack，这个网站有 3 个不同的环境，每个环境都有自己的配色方案（所以人们知道他们在什么环境中）所以我需要一种方法来告诉 webpack 加载哪个 css 文件以及何时加载，但不确定如何去做。

最后的结果是：

/asset/styles/style.dev.css

/asset/styles/style.debug.css

/asset/styles/style.prod.css

Answer 1

更新

例如，您默认启用了某个主题，并且您有一个主题切换器控件（布局页面），它使用 JavaScript.

在客户端引发事件

在您的入口脚本中，您可以附加到主题切换器控件的更改事件并执行：

虚拟代码：Index.js

function changedEventHandler(){

var selectedTheme =  $(this).selectedValue;

  switch (selectedTheme) {
    case "themeA":
        require("themeA")
        break;
    case "themeB":
        require("themeB")
        break;
    default:
        require("defaultTheme")
  }
}

webpack.config.js

 resolve: {
            alias: {
                "theme$": path.resolve(theme),
                "themeA$": path.resolve("./src/css/themeA.css"),
                "themeB$": path.resolve("./src/css/themeB.css"),
                 ...

如果您想要三个不同的构建，每个构建都有不同的主题，您可以执行以下操作：

如果您想要使用主题 A 运行构建：npm run themeA

如果你想要使用 themeB 运行构建：npm run themeB

package.json

 "scripts": {
    "themeA": "webpack --env.theme=themeA --mode development",
    "themeB": "webpack --env.theme=themeB --mode development",

webpack.config.js

module.exports = (env) => {

    var theme = "";

    if (env.theme) {
        theme = "./src/css/" + env.theme + ".css"
    }
    console.log(path.resolve(theme));

    return {
        entry: './src/index.js',
        output: {
            path: distfolder,
            filename: 'bundle.js'
        },
        resolve: {
            alias: {
                "theme$": path.resolve(theme)
            }
        },
...
..
.

在你的入口点你可以做：

index.js

import "theme"

按环境渲染 css

rendering css by environment

razor

asp.net-mvc-4

webpack-4