angular-cli：依赖于环境的 CSS

Posted 2023-03-06

【中文标题】angular-cli：依赖于环境的 CSS

【英文标题】：angular-cli: CSS dependent on environment

【发布时间】：2017-04-07 06:18:15

【问题描述】：

我正在使用带有angular-cli 的Angular 2。对于客户 A，CSS 文件 style.A.css 是相关的，对于客户 B，它是 style.B.css。是否可以使apps[0].styles 中定义的css 文件依赖于活动环境？如果没有，有什么优雅的解决方案吗？

CSS 的范围是整个应用程序，就像一个完全不同的外观。所以组件范围是不够的。

【参考方案1】：

我们使用不同的应用名称来解决这个问题。我们在 angular-cli.json 中定义了不同的客户，并在其中定义了哪个 style.css 用于哪个应用程序名称。我们有一个默认值，然后是我们拥有的所有客户，我们可以为每个客户说明我们想要使用哪些资产、哪些样式甚至哪些环境就足够了。

要启动和构建应用程序，您只需默认调用“ng serve app-name”或“ng serve”

【参考方案2】：

您可以探索材质调色板。 将一种客户端调色板更改为另一种。

https://www.materialpalette.com/

【参考方案3】：

这取决于您的项目是如何设置的。以及您是否从 CLI 中弹出。我使用带有 angular 4 和 webpack 的弹出 angular-cli。弹出或者不弹出都可以自定义环境文件，但是css构建过程在构建过程中比环境文件要早。我建议自定义 webpack 配置以根据您的构建目标复制基于您的 npm 脚本的文件。您可以使用 GlobCopyWebpackPlugin 将文件复制到输出文件夹。然后您将静态导入该 css 文件。

例如，在 webpack.config.js 中，我在构建过程中将文件复制到输出文件夹，您可以以相同的方式复制 css，然后在您的主 index.html 中只需引入环境提供的 css你正在建造。

new GlobCopyWebpackPlugin(
  "patterns": [
    "assets",
    "favicon.ico",
    "manifest.json",
    "sw.js"
  ],
  "globOptions": 
    "cwd": process.cwd() + "/src",
    "dot": true,
    "ignore": "**/.gitkeep"
  
)

我的 package.json 在脚本构建过程中提供了环境标志

  "scripts": 
    "ng": "ng",
    "start": "webpack-dev-server --env.target=local --port=4200 --history-api-fallback",

您可以使用环境标志为 GlobCopyWebpackPlugin 选择合适的 css 文件

// export a function that returns a promise that returns the config object
module.exports = function(env) 

const isLocal = env.target === 'local';
if(isLocal)  /* set the css file to a variable mycssfile*/ 

/* code removed for brevity */
  "plugins": [

    new NoEmitOnErrorsPlugin(),

    new GlobCopyWebpackPlugin(
          "patterns": [
            `$mycssfile`,
            "assets",
            "favicon.ico",
            "manifest.json",
            "sw.js"
          ],
          "globOptions": 
            "cwd": process.cwd() + "/src",
            "dot": true,
            "ignore": "**/.gitkeep"
          
        )`