在 webpack.config.js 中定义 css 个文件
Define css files within webpack.config.js
我正在构建类似静态网站生成器的东西,它使用 webpack 来构建项目并使用它创建一个包。
在此项目中,用户可以指定自定义 css 文件。我希望将那些 css 文件与最终结果捆绑在一起。问题是,我没有在开发过程中可用的那些 css 文件的路径,因此我无法在将要捆绑的 javascript 代码中执行 import 'some-asset-file-provided-by-the-user.css'
。但是我在调用 webpack.compile(config)
.
时可以使用它们
我正在寻找一种方法将那些 css 文件注入到包中。到目前为止,我尝试了各种方法,例如:
const stylesheet = 'some-asset-file-provided-by-the-user.css'
require(stylesheet)
这没有用,可能是因为 webpack 无法处理这个 "dynamic" 要求。然后我为此使用了 webpack define 插件
/* webpack.config.js */
new webpack.DefinePlugin({
stylesheet: 'some-asset-file-provided-by-the-user.css'
}),
/* app.js */
require(stylesheet) // should be replaced by the webpack define plugin with 'some-asset-file-provided-by-the-user.css'
这也没有用。我也试图找到一种方法来做这样的事情:
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(Object.assign({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
useFiles: ['file-a.css', 'file-b.css']
}
}
]
}, extractTextPluginOptions))
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
这也失败了,因为显然 style-loader 和 css-loader 都不支持这种类型的交互。
我该如何解决这个问题?我愿意为此编写一个插件,但我宁愿使用现有的东西。
包含 CSS 的最简单方法是将其添加到您的入口点。为了使这更容易,你应该使用一个数组作为入口点,即使它只是一个文件,所以你可以简单地推送 CSS.
例如:
entry: {
app: ['./src/index.js'],
// Other entries
},
在你的编译脚本中,你在将它传递给 webpack 之前将它添加到 entry.app
。
config.entry.app.push('./user.css');
const compiler = webpack(config);
我正在构建类似静态网站生成器的东西,它使用 webpack 来构建项目并使用它创建一个包。
在此项目中,用户可以指定自定义 css 文件。我希望将那些 css 文件与最终结果捆绑在一起。问题是,我没有在开发过程中可用的那些 css 文件的路径,因此我无法在将要捆绑的 javascript 代码中执行 import 'some-asset-file-provided-by-the-user.css'
。但是我在调用 webpack.compile(config)
.
我正在寻找一种方法将那些 css 文件注入到包中。到目前为止,我尝试了各种方法,例如:
const stylesheet = 'some-asset-file-provided-by-the-user.css'
require(stylesheet)
这没有用,可能是因为 webpack 无法处理这个 "dynamic" 要求。然后我为此使用了 webpack define 插件
/* webpack.config.js */
new webpack.DefinePlugin({
stylesheet: 'some-asset-file-provided-by-the-user.css'
}),
/* app.js */
require(stylesheet) // should be replaced by the webpack define plugin with 'some-asset-file-provided-by-the-user.css'
这也没有用。我也试图找到一种方法来做这样的事情:
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(Object.assign({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
useFiles: ['file-a.css', 'file-b.css']
}
}
]
}, extractTextPluginOptions))
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
这也失败了,因为显然 style-loader 和 css-loader 都不支持这种类型的交互。
我该如何解决这个问题?我愿意为此编写一个插件,但我宁愿使用现有的东西。
包含 CSS 的最简单方法是将其添加到您的入口点。为了使这更容易,你应该使用一个数组作为入口点,即使它只是一个文件,所以你可以简单地推送 CSS.
例如:
entry: {
app: ['./src/index.js'],
// Other entries
},
在你的编译脚本中,你在将它传递给 webpack 之前将它添加到 entry.app
。
config.entry.app.push('./user.css');
const compiler = webpack(config);