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 中弹出。我使用带有 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"
          }
        })`