支持 js 中用 require 直接加载 css 文件。
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
README.md
index.js
package.json

README.md

fis3-preprocessor-js-require-css

支持 js 中直接 require css. (es6 的 import 也支持,但是先通过 es6 => es5 的转换。)

只能在 fis3 中使用。

npm install -g fis3-preprocessor-js-require-css

使用方式配置如下:

fis.match('*.{js,es,es6,jsx,ts,tsx}', {
  preprocessor: fis.plugin('js-require-css')
})

如果想 require 文件比如图片,请使用fis3-preprocessor-js-require-file

两个可以同时使用,配置如下。

fis.match('*.{js,es,es6,jsx,ts,tsx}', {
  preprocessor: [
    fis.plugin('js-require-file'),
    fis.plugin('js-require-css')
  ]
})

参数说明

mode: 加载模式,默认为 dependency

  • dep | dependency 【推荐】 简单的标记依赖,并将js语句中对应的 require 语句去除。fis 的资源加载程序能够分析到这块,并最终以 <link> 的方式加载 css.
  • embed | inline 将目标 css 文件转换成 js 语句, 并直接内嵌在当前 js 中,替换原有 require 语句。
  • jsRequire 将目标 css 文件转换成 js 语句,但是并不内嵌,而是产出一份同名的 js 文件,当前 require 语句替换成指向新产生的文件。

使用示例

inline

按以下方式配置 fis-conf.js 以及在 js 文件中引用,css 文件会以匿名函数的形式嵌入到生成的 js 文件中,运行时自动以 style 标签添加到页面头部

fis-conf.js

// match 到的 js 文件具有 require css 的能力
fis.match('*.{js,es,es6,jsx,ts,tsx}', {
  // embed or inline
  preprocessor: fis.plugin('js-require-css', {mode: 'inline'})
});

js

// reuqire 只是一个识别标记,就算 js 文件中没有 require 函数也可以这样写
require('xxx.css');