我们可以在 index.html 中直接引用 sass 文件而不是 css 文件吗?
如果可以的话,webpack是如何将sass编译成css文件的?另外,构建应用程序时捆绑 sass 文件的最佳方式是什么?
我正在使用以下版本:
webpack(3.5.5)、angular/cli(1.4.1) 和 angular4
我的文件夹结构是这样的,
src
├--- assets
| ├--- sass
| | ├--- common.scss
| | ├--- base.scss
| | ├--- coustom.scss
| ├--- css
| ├--- common.css
| ├--- base.css
| ├--- coustom.css
|
├--- index.html
├--- .angular-cli.json
最佳答案
首先浏览器不理解scss
ot less
。所以你必须编译然后在浏览器中运行时将它们转换为 css。
当您使用 angular cli 时,有一种非常简单的方法可以做到这一点,并且不需要任何配置。
新建cli元素
因此,在生成元素时,您可以传递一个标志来告诉 cli 选择 scss 而不是 css。
ng new projectname --style scss
现有元素
如果它是一个现有的 cli 元素,您可以编辑 .angular-cli.json
文件以将 css 更改为 scss。
首先你的风格需要scss
"styles": [
"/asset/scss/common.scss",
"/asset/scss/base.scss",
"/asset/scss/custom.scss",
"/asset/scss/common.css",
"/asset/scss/base.css",
"/asset/scss/custom.css",
"styles.scss"
],
默认样式为scss
"defaults": {
"styleExt": "scss",
"component": {}
}
对于外部 js 库,您可以添加一个 script
block 并在那里添加您的脚本。它将自动添加到您的构建中。
"scripts": [
"../node_modules/jquery/dist/jquery.js"
],
关于css - sass 如何与 angular4 中的 webpack 一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46713904/