创建仅限 CSS 的 JavaScript 库/捆绑包的最佳实践是什么?

Question

我想创建一个库，可以npm installed到十几个javascript项目中的一个(有些是ES6项目，但许多是更旧的ES5项目)。 库项目还有一些非常常见的javascript方法/类/组件/等。

(顺便说一句，库项目包括一些常见的方法和实用程序，这些方法和实用程序是编写的 ES6，但使用 webpack+babel 转译为也用于 ES5 和 ES6 项目。 意思是：我在 webpack.config 中的输入文件是 module.exports 的文件;我的输出是单个构建文件。

主要问题：

在 ES6 上的实现，例如一个反应项目，我不确定如何import 'nodeModuleName/someSimpleCssFile'允许 webpack/babel(在实现方面)做它的事情。 特别是在一个项目中，从该项目导入的唯一内容是单个全局样式表。

在旧项目的实现中，开发人员需要能够使用<link />标记来拉入一个样式表。

我知道我可以简单地将所有 css 文件放在 package.json 的main属性中指定的文件夹中，但这是最好的方法吗？ 看起来，如果样式器添加background: url('some/path/to/image.png');，使用 babel 转译器会将所有这些内容拉入单个构建文件中。

在这种情况下的问题是，如何只import一个被转译为单个构建文件的 css 文件？ 或者，更确切地说，我如何在要导出的主module.exports中包含该单个 css 文件，以便我可以以某种方式仅将该 css 文件导入 ES6/ES2015 项目？

Answer 1

实现此目的的一种方法是将 CSS 样式信息存储在库中的对象中，并在页面加载时动态创建和填充<style>标记。

/* example */
var someStyles = {
body: {
color: '#fff',
'background-color': '#000',
'font-family': 'sans-serif',
margin: '33px'
},
'h1, h2, h3, h4': {
'font-weight': 'normal'
},
ID_box: {
width: '100%',
height: 'auto',
color: '#000',
'background-color': '#fff'
},
CLASS_cell: {
border: '1px solid #999',
padding: '5px 10px'
}
};
var sTag = document.createElement('style');
var css = '';
sTag.type = 'text/css';
sTag.scoped = 'true';
Object.keys(someStyles).forEach(function(s) {
var rules = someStyles[s];
css += s.replace(/ID_/g, '#').replace(/CLASS_/g, '.') + ' {n';
Object.keys(rules).forEach(function(r) {
css += '  '+ r + ': ' + rules[r] + ';n';
});
css += '}n';
});

sTag.textContent = css;
document.body.insertBefore(sTag, document.body.firstChild);

只是一个想法:)