构建中 style.js 的 angular 6 whats [英] angular 6 whats for style.js in the build

问题描述

查看html源码

我使用 sass 使用 ng 6 构建的 SPA

of my SPA build with ng 6 using sass

我找到了这些文件列表

<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>

我想知道 style.js 有什么用?

I'm wondering what's style.js for?

我正在导入引导程序

在我的 style.scss 之类的

in my style.scss like

(我这样做是因为如果我把angular.json 中的引导程序我不能拥有我的自定义主题查看变量)

(I do that because if I put bootstrap in angular.json I can't have my custom theme see variables)

@import "./assets/variables";
@import "~bootstrap/scss/bootstrap";

推荐答案

在开发版本中，全局样式被提取到 .js 文件，而在生产版本中，它们被提取到 .css 文件.要更改此默认行为，请使用 --extract-css 选项或其别名 -ec 和 ng build 命令.

With the development build global styles are extracted to .js files whereas with the production build they are extracted to .css files. To change this default behavior use --extract-css option or it's alias -ec with the ng build command.

我们希望在 bundle webpack 中使用的每个文件/模块都期望是一个有效的 JavaScript 模块.当然，styles.css 不是有效的 JavaScript 模块.所以我们需要一些东西来把这个 CSS 模块变成 JS 模块.这就是加载器的用武之地.以下是 webpack 文档中关于加载器的说明:

Every file/module we want to be used in the bundle webpack expects to be a valid JavaScript module. And certainly styles.css is not a valid JavaScript module. So we need something to turn this CSS module into JS module. And this is where loaders come in. Here is what webpack docs say about loaders:

加载器是应用于模块源代码的转换.它们允许您在导入或加载"文件时对其进行预处理……加载器可以将文件从不同的语言(如 TypeScript)转换为 JavaScript，或将内嵌图像作为数据 URL.

Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or "load" them… Loaders can transform files from a different language (like TypeScript) to JavaScript, or inline images as data URLs.

更多:这就是 angular-cli/webpack 向客户端传递 CSS 样式的方式

这篇关于构建中 style.js 的 angular 6 whats的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！