stylesheets.cn

embedded stylesheets

内嵌样式表

Through using the style-loader and the css-loader it's possible to embed stylesheets into a webpack javascript bundle. This way you can modularize your stylesheets with your other modules. This way stylesheets are as easy as require("./stylesheet.css").

通过使用style-loader和css-loader，可以将样式表嵌入到webpack的javascript的bundle中。这样你可以模块化你的样式表，与其他模块一起使用。这样，样式表通过require("./stylesheet.css")简单使用。

installation

安装

Install the loaders from npm.

从npm安装loader

npm install style-loader css-loader --save-dev

configuration

配置

Here is a configuration example that enables require() css: 下面这个配置示例允许使用require()引入css：

{
	// ...
	module: {
		loaders: [
			{ test: /\.css$/, loader: "style-loader!css-loader" }
		]
	}
}

For compile-to-css languages see the according loaders for configuration examples. You can pipe them...

对于编译成css的语言，参见对于loader的配置样例。它们可以串联使用。

Keep in mind that it's difficult to manage the execution order of modules, so design your stylesheets so that order doesn't matter. (But you can rely on the order within a given CSS file.)

记住，管理模块的执行顺序是很难的，所以样式表要设计成顺序无关的。（但你可以依赖一个给定css文件内的样式顺序）

using css

使用css

// in your modules just require the stylesheet
// This has the side effect that a <style>-tag is added to the DOM.
require("./stylesheet.css");

separate css bundle

In combination with the extract-text-webpack-plugin it's possible to generate a native css output file.

结合使用extract-text-webpack-plugin，可以生成输出原生的css文件。

With Code Splitting we can use two different modes:

利用_代码分割_，我们可以使用两种不同的模式：

• Create one css file per initial chunk (see Code Splitting) and embed stylesheets into additional chunks. (recommended)

• Create one css file per initial chunk which also contains styles from additional chunks.

• 每个初始块都创建一个css文件(参见 Code Splitting)，并将样式表嵌入到额外的块。（推荐）

• 每个初始块都创建一个css文件，同时也包含其他块的样式

The first mode is recommended because it's optimal in regards to initial page loading time. In small apps with multiple entry points the second mode could be better because of HTTP request overheads and caching.

建议使用第一种模式，因为它对于首屏加载时间是最优的。对于小型的有多个入口点的应用，基于HTTP请求开销与缓存的考虑，第二种模式更为适合，

plugin installation

插件安装

Install the plugin from npm.

从npm安装插件

npm install extract-text-webpack-plugin --save

general

一般情况

To use the plugin you need to flag modules that should be moved into the css file with a special loader. After the compilation in the optimizing phase of webpack the plugin checks which modules are relevant for extraction (in the first mode only these that are in an initial chunk). These modules are compiled for node.js usage and executed to get the content. Additionally the modules are recompiled in the original bundle and replaced with an empty module.

为了使用插件，你需要标记被特定loader移入css文件的模块。在webpack的优化阶段的编译后，插件会检查哪个模块是跟提取相关的（在第一种模式只会出现在初始块）。这些是被编译成在node.js上运行的，会被执行以获取真正内容。此外，这些模块会被重新编译进原来的包，并以空模块来替换。

A new asset is created for the extracted modules.

提取了的模块被创建成一个新的资源。

styles from initial chunks into separate css output file

每个初始块的样式以单独css文件输出

This examples shows multiple entry points, but also works with a single entry point.

这展现了多个入口点的案例，但也适用于单入口点。

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
	// The standard entry point and output config
	entry: {
		posts: "./posts",
		post: "./post",
		about: "./about"
	},
	output: {
		filename: "[name].js",
		chunkFilename: "[id].js"
	},
	module: {
		loaders: [
			// Extract css files
			{
				test: /\.css$/,
				loader: ExtractTextPlugin.extract("style-loader", "css-loader")
			},
			// Optionally extract less files
			// or any other compile-to-css language
			{
				test: /\.less$/,
				loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
			}
			// You could also use other loaders the same way. I. e. the autoprefixer-loader
		]
	},
	// Use the plugin to specify the resulting filename (and add needed behavior to the compiler)
	plugins: [
		new ExtractTextPlugin("[name].css")
	]
}

You'll get these output files:

你会得到这些输出文件：

• posts.js posts.css
• post.js post.css
• about.js about.css
• 1.js 2.js (contain embedded styles)
• 1.js 2.js (包含内嵌样式)

all styles in separate css output file

所有样式都在一个单独的css输出文件

To use the second mode you just need to set the option allChunks to true:

// ...
module.exports = {
	// ...
	plugins: [
		new ExtractTextPlugin("style.css", {
			allChunks: true
		})
	]
}

You'll get these output files:

你会得到这些输出文件：

• posts.js
• post.js
• about.js
• 1.js 2.js (don't contain embedded styles)
• 1.js 2.js (不包含嵌入样式)
• style.css

styles in commons chunk

公共块中的样式

You can use a separate css file in combination with the CommonsChunkPlugin. In this case a css file for the commons chunk is emitted too.

你可以结合使用CommonsChunkPlugin分离css文件。下面这个例子公共块的css也被生成了。

// ...
module.exports = {
	// ...
	plugins: [
		new webpack.optimize.CommonsChunkPlugin("commons", "commons.js"),
		new ExtractTextPlugin("[name].css")
	]
}

You'll get these output files:

你会得到这些输出文件：

• commons.js commons.css
• posts.js posts.css
• post.js post.css
• about.js about.css
• 1.js 2.js (contain embedded styles)
• 1.js 2.js (包含内嵌样式)

或者使用 allChunks: true

• 1.js 2.js (不包含嵌入样式)