Aurelia，作用域CSS

Question

我对Aurelia和Web开发（如nodejs、gulp等）都很陌生。

幸好使用Aurelia CLI，我可以轻松地在Visual Studio Code中设置一个漂亮的Aurelia项目，并使用Typescript + SASS。我认为使用scoped css是个不错的主意（如果这不是个好主意，请告诉我: )）。虽然有关这个主题的信息已经很多了，但很难找到我真正可以使用的东西。因此，我决定按照以下方式自己实现：

1. 我有一些通用样式表，可以在“任何地方”导入。不需要做任何新的工作。
2. 将有组件特定的样式表与组件名称匹配+ ".scss"。例如，如果存在视图+模型（component.ts、component.html），则可以有一个component.scss，其中包含特定于component.ts和component.html的样式，并且应该被限制在此组件范围内。

我尝试过使用style scoped html标签，但这在浏览器中并不广泛支持（似乎已从规范中删除？），我也试过一些方法（忘记具体是什么了），就像这里所描述的：

https://github.com/bryanrsmith/aurelia-binding-loader

使用：

<template>
  <require from="styles.css!module!bind" as="styles"></require>

  <div class.one-time="styles.first">First</div>
  <div class.one-time="styles.second">Second</div>
</template>

这个很慢。

我的关于这个的知识非常有限，我认为它将CSS转换为JS对象，然后将标签的类绑定到JS对象中的样式。

我认为在构建时将此转换为JS是有意义的。因此，我使用我非常有限的gulp知识以以下方式更改了process-css.ts：

import * as gulp from 'gulp';
import * as sourcemaps from 'gulp-sourcemaps';
import * as sass from 'gulp-sass';
import * as project from '../aurelia.json';
import { build } from 'aurelia-cli';
import * as path from "path";
import * as fs from "fs";
import * as rename from "gulp-rename";
import * as postcssmodules from "postcss-modules";
import * as postcss from "postcss"
import * as postcssJs from "postcss-js"
import * as tap from "gulp-tap";

export default function processCSS() {
  return gulp.src(project.cssProcessor.source)
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(tap(handleCss))
    .pipe(build.bundle())
};

function handleCss(cssFile, t) {
  // get the path of the html file
  var baseFilename = path.basename(cssFile.path, '.css');
  var baseFilepath = path.join(path.dirname(cssFile.path), baseFilename);
  var htmlFilepath = baseFilepath + '.html';

  // check if the html file exists
  if (fs.existsSync(htmlFilepath)) {
    var root = postcss.parse(cssFile.contents.toString());
    var cssAsJson = postcssJs.objectify(root);
    var s = JSON.stringify(cssAsJson);
    cssFile.contents = Buffer.from(s);
  }
}

（添加handleCss）。

这还没有完成。新的带有样式的对象必须以相同的名称添加到捆绑包中，但是要使用扩展名“.js”。有什么好方法可以做到这一点吗？

如果这样做可以实现，那就太好了，但它仍然只适用于作用域css类，而不是css元素。 我考虑过的另一个可能性是，在构建时将component.scss样式插入到component.html中（例如，设置元素的样式属性）。如果可以这样做，应该如何实现？这样做有什么缺点吗？

如果在这篇文章中有“愚蠢”的问题，请原谅，基本上这一切都很新，很难找到开始的地方。

谢谢！

- Robbert

---

我在这方面不是专家，所以只是发表评论以避免“盲人引导盲人”。但是...我的理解是Aurelia不支持作用域CSS，因此您计划使用的任何解决方案都需要一些黑科技或仅仅是命名约定。如果我是你，我会使用SASS并将整个CSS包装在一个带有组件名称和可能是css_前缀的类中，并将该类添加到模板标记中（<template class='css_user_list'>）。这应该有效地限制CSS标签仅适用于该组件内部（及其子级）。 - LStarky

是的，我同意Starky的观点，只需使用组件的相同名称作为您的类名（即.my-component），因为不能有两个具有相同名称的组件，因此您也永远不会有两个具有相同名称的类。或者，您实际上可以使用一个id。可以说这正是它的用途（唯一地为单个元素及其后代设置样式）。 - powerbuoy

你好，谢谢你们两位的帮助 :) 我原本计划做的确实有点像 hack。我想在构建时做一些事情，至少自动将 CSS 样式转换为可以绑定到组件中元素的 JS 对象。另一种方法可能是在构建时将样式合并到 HTML 元素中。你们提出的解决方案可能也足够好了。我也考虑过这个方法，但没有深入思考。我会尝试一下，看看效果如何。再次感谢。 - Robbert

只是想提一下，aurelia-ux 提供了作用域 CSS。它目前处于早期阶段，但该功能已经存在，我已经进行了一些测试。你可能想要查看它作为一个可能的解决方案。 - Jeff G

在这里插一句话。目前，作用域 CSS 也已被官方规范暂时删除。 - Dwayne Charrington

Answer 1

如果您正在使用Webpack与Aurelia，您可以使用ConventionDependenciesPlugin，以便像js和html一样自动包含css/scss文件。配置完成后，您无需再require样式表。请注意，如果在html和js文件之后添加css/scss文件，则可能需要重新启动Webpack watch，因为ConventionDependenciesPlugin有时无法捕获相关文件。

- tvbusy