如何将 TypeScript WebPack ts-loader 与 Angular2 @View 样式集成？

Posted 2023-02-22

【中文标题】如何将 TypeScript WebPack ts-loader 与 Angular2 @View 样式集成？

【英文标题】：How to integrate TypeScript WebPack ts-loader with Angular2 @View styles?

【发布时间】：2016-03-19 01:31:52

【问题描述】：

我正在使用 Angular2 + WebPack + Typescript 1.7 堆栈 + SASS + CommonJs。

我已将 webpack SASS 加载器配置为使用“style!css!sass”加载器监视 scss 文件。

在我的组件中，我有 @View 装饰器，其中包含 styles 或 styleUrls 参数，可用于传递该组件的内联样式或样式 url。

如果我指定其中一个 @View 参数，Angular2 将自动加载指定的 css 文件或（或内联 css），这对我有用。

但如果我将使用 sass-loader + require() 这将使我能够将 scss 编译为 css 并将其内置到我的 js 文件中（我正在使用 ts-loader 并且我的所有脚本都合并到应用程序中.js)。

所以我可以使用 stylesUrl 来通过 Angular2 自动预加载 css 文件。

@View( stylesUrl: 'my.css') export class Component

或者我可以使用 require('*.scss') 将 css 合并到我的 app.js 中

require('styles/my.scss');
@View() export class Component

什么是更好的方法，我的意思是 Angular2 方式？

我还可以从所有 scss 文件中预先构建一些 common.css，并简单地避免为组件指定任何样式。 index.html 中只会包含 1 个 common.css + common.css.map 文件（用于调试）

附：关于最后一种方法（合并所有css文件）

//webpack.config.js
loaders: [
        
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract('style', ['css?sourceMap', 'sass?sourceMap']),
            include: path.join(__dirname, 'src', 'styles'),
        
...
    plugins: [
    new ExtractTextPlugin("assets/path/styles.css?[hash]-[chunkhash]-[contenthash]-[name]", 
        disable: false,
        allChunks: true
    )


//index.html
<link rel="stylesheet" href="assets/path/styles.css" />

所以现在我有了指向 css 的 CDN 供应商链接。我所有的自定义 css（用 scss 编写）都合并到 1 个文件 styles.css 中，该文件为所有组件加载一次。

此方法已启用 sourceMap。但是在调试中澄清要修改哪个scss文件有点棘手。而且Angular @View声明中也没有任何信息

【参考方案1】：

好吧，我不太明白这个问题或问题，但我会尽力回答我所理解的。 所以对我来说，我认为你指定的两种方式都不是最好的。我用的是：

@Component(
 selector: 'message',
 template: '<p class = class> whatever html </p>',
 styles: [ require('./style.scss')],
 )

export class Comp

因此，通过包含这样的样式表，我获得了 2 件事：

使用 sass 并将其直接输入到我的代码中 使用 Angular 2 的view encapsulations 的能力