css - Aurelia，作用域 css

Question

我对 Aurelia 和一般的新 Web 开发(nodejs、gulp 等)还很陌生。

感谢 Aurelia CLI，我可以使用 Typescript + SASS 轻松地为 Visual Studio Code 设置一个不错的 Aurelia 元素。我认为使用 scoped css 是个好主意(但如果这不是个好主意，请告诉我 :)。已经有很多关于这个主题的信息，但很难找到我可以实际使用的东西。所以我想我会按照以下方式自己做:

1. 我有可以“随处”导入的通用样式表。不需要做任何新的事情来做到这一点。
2. 将有组件特定的样式表匹配组件名称+“.scss”。所以例如如果有一个像这样的 View +模型:component.ts、component.html，可以有一个 component.scss，它将包含特定于 component.ts 和 component.html 的样式，因此应该限定在该组件内。

我曾尝试使用样式范围的 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 对象的转换，之后标签的类绑定(bind)到 JS 对象中的样式。

我认为在构建时转换为 JS 是有意义的。因此，凭借我非常有限的知识，我按以下方式更改了 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 中(例如设置元素的样式属性)？如果是这样，如何/应该这样做？这样做有什么缺点吗？

很抱歉，如果这篇文章中有“愚蠢”的问题，基本上这都是非常新的，很难找到从哪里开始。

谢谢!

Answer 1

如果您将 Aurelia 与 Webpack 结合使用，则可以使用 ConventionDependenciesPlugin这样 css/scss 文件就像 js 和 html 一样被自动包含。配置后，您不再需要 require 样式表。请注意，如果您在 html 和 js 文件之后添加 css/scss 文件，您可能需要重新启动 Webpack watch，因为 ConventionDependenciesPlugin 有时不会获取依赖文件。