Question

我是Aurelia的新手，也是新的网络开发（nodejs，gulp等）。

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

我有一般样式表可以导入＆＃34;任何地方＆＃34;。没有什么新的工作要做。
将有与之匹配的组件特定样式表组件名称+＆＃34; .scss＆＃34;。所以例如如果有一个视图+模型，如： component.ts，component.html，可以有一个component.scss，它将包含特定于component.ts和component.html的样式，因此应限定为此组件。

我尝试使用样式范围的html标签，但浏览器并没有广泛支持（并且似乎从规范中删除了？）并且我尝试了一些东西（我忘记了我＆＃39;正如

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

使用：

＆＃13;

<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>

＆＃13;

非常慢。

我对这一切的了解非常有限，我认为它会从CSS转换为JS对象，之后标签的类被绑定到JS对象中的样式。

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

＆＃13;

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);
  }
}

＆＃13;

（添加handleCss）。

尚未完成。具有样式的新对象必须以相同的名称添加到包中，但具有扩展名＆＃34; .js＆＃34;。 我怎样才能以一种好的方式做到这一点？

如果这样做会很好，但它仍然只限于范围内的CSS类，而不是css元素。我想到的另一种可能性是，也许component.scss样式可以在构建期间插入component.html（例如设置元素的样式属性）？如果是这样，怎么可能/应该这样做？这样做有什么缺点吗？

很抱歉，如果有＆＃34; dumb＆＃34;这篇文章中的问题，基本上都是非常新的，很难找到从哪里开始。

谢谢！

Answer 1

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

Aurelia，scoped css

1 个答案: