Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

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');

About

支持 js 中用 require 直接加载 css 文件。

Resources

Releases

No releases published

Packages

No packages published