Question

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

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

Answer 1

这取决于项目的设置方式。而且你是否被从CLI中驱逐出去。我使用带有角度4和webpack的弹出角度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"
          }
        })`

Answer 2

您可以浏览“材质”面板。将一个客户端调色板更改为另一个。

https://www.materialpalette.com/

Answer 3

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

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

angular-cli：CSS依赖于环境

3 个答案: