angular-cli：CSS依赖于环境 [英] angular-cli: CSS dependent on environment

问题描述

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

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

解决方案

这取决于您的项目设置方式。并且你是否被从CLI中弹出。我使用角度4和webpack的弹出角度cli。如果弹出或不弹出，您可以自定义环境文件，但css构建过程在构建期间早于环境文件。我建议根据您的构建目标，根据您的npm脚本，自定义webpack配置来复制文件。您可以使用GlobCopyWebpackPlugin将文件复制到输出文件夹。然后你会静态导入该css文件。

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

 新的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，
  

您可以使用环境标志为GlobCopyWebpa选择适当的css文件ckPlugin

$ $ p $ //导出一个函数返回一个返回配置对象的promise
module.exports = function（env ）{

const isLocal = env.target ==='local';
if（isLocal）{/ *将css文件设置为一个变量mycssfile * /}

/ *为简洁起见删除了代码* /
插件：[

新增NoEmitOnErrorsPlugin（），

新增GlobCopyWebpackPlugin（{
patterns：[
`$ {mycssfile}`，
assets），
favicon.ico，
manifest.json，
sw.js
]，
globOptions：{
cwd ：process.cwd（）+/ src，
dot：true，
ignore：** / .gitkeep
}
}）`


I am using Angular 2 with angular-cli. For customer A the CSS file style.A.css is relevant, for customer B it's style.B.css. Is it possible make the css files defined in apps[0].styles dependent on the active environment? If not, any elegant solution for this?

The CSS's scope is the whole app, like a totally different appearance. So component scope will not be sufficient.

解决方案

This is dependent on how your project is setup. And whether you are ejected from the CLI. I use an ejected angular-cli with angular 4 and webpack. You can customize environment files if you are ejected or not ejected, but the css build process is earlier during the build than the environment files. I would recommend customizing the webpack config to copy a file based on your npm script depending on your build target. You can use the GlobCopyWebpackPlugin to copy files to the output folder. Then you would static import that css file.

For example in webpack.config.js I am copying files during the build to the output folder, you could copy a css the same way, then in your main index.html just bring in that css that is supplied by the environment you are building for.

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

My package.json provides the environment flag during the script build process

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

You could use the environment flag to select the appropriate css file for the 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"
          }
        })`

这篇关于angular-cli：CSS依赖于环境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！