angular-cli：CSS取决于环境

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构建过程在构建期间早于环境文件。我建议根据您的构建目标，根据您的npm脚本，自定义webpack配置来复制文件。您可以使用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", 

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

// 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" 
      } 
     })` 

提供了环境标志