在 angular 4 中为 webpack 配置破裂

Question

我是网络包的新手。对于我的风格 sheet 编辑，我使用手写笔。使用手写笔的一个很好的特性是我们可以使用破裂来生成媒体查询。 angular 4.

我们如何用webpack配置rupture npm package

Answer 1

使用 yarn add rupture -D 或 npm install rupture -D

添加破裂作为开发依赖

在根目录.angular-cli.json文件中添加stylePreprocessorOptions

"styles": [
  "styles.styl"
],
"stylePreprocessorOptions": {
  "includePaths": [
  "../node_modules/rupture/"
  ]
},

现在可以使用 @import "rupture"

在整个应用程序中导入破裂

将 @import "rupture" 语句放在全局 styles.styl 文件中，使其全局可用，无需在多个文件中单独导入

注意：代码块中的 styles只是对位置的引用，在任何你想要的地方添加stylePreprocessorOptions但它已经成为一部分apps array

中的一个对象

configure rupture for webpack in angular 4