diff --git a/docs/book.json b/docs/book.json index 4cdd37699..102189947 100644 --- a/docs/book.json +++ b/docs/book.json @@ -1,7 +1,7 @@ { "title": "vue-loader", "gitbook": ">3.0.0", - "plugins": ["edit-link", "theme-vuejs@git+https://github.com/pearofducks/gitbook-plugin-theme-vuejs.git", "-fontsettings", "github"], + "plugins": ["edit-link", "theme-vuejs", "-fontsettings", "github"], "pluginsConfig": { "edit-link": { "base": "https://github.com/vuejs/vue-loader/tree/master/docs", diff --git a/docs/en/README.md b/docs/en/README.md index ed4480e79..0250fa4a9 100644 --- a/docs/en/README.md +++ b/docs/en/README.md @@ -21,9 +21,9 @@ In a nutshell, the combination of Webpack and `vue-loader` gives you a modern, f If you are already familiar with Webpack, feel free to skip the following explanation. But for those of you who are new to Webpack, here's a quick intro: -[Webpack](http://webpack.github.io/) is a module bundler. It takes a bunch of files, treating each as a module, figuring out the dependencies between them, and bundle them into static assets that are ready for deployment. +[Webpack](https://webpack.github.io/) is a module bundler. It takes a bunch of files, treating each as a module, figuring out the dependencies between them, and bundle them into static assets that are ready for deployment. -![webpack](http://webpack.github.io/assets/what-is-webpack.png) +![webpack](https://webpack.github.io/assets/what-is-webpack.png) For a basic example, imagine we have a bunch of CommonJS modules. They cannot run directly inside the browser, so we need to "bundle" them into a single file that can be included via a ` +``` diff --git a/docs/zh-cn/configurations/pre-processors.md b/docs/zh-cn/configurations/pre-processors.md index d3779403c..65e6a50b7 100644 --- a/docs/zh-cn/configurations/pre-processors.md +++ b/docs/zh-cn/configurations/pre-processors.md @@ -1,6 +1,6 @@ # 使用预处理器 -在 Webpack 中，所有的预处理器需要匹配对应的 loader。 `vue-loader` 允许你使用其它 Webpack loaders 处理 Vue 组件的某一部分。它会根据 `lang` 属性自动推断出要使用的 loaders。 +在 Webpack 中，所有的预处理器需要匹配对应的 loader。`vue-loader` 允许你使用其它 Webpack loader 处理 Vue 组件的某一部分。它会根据 `lang` 属性自动推断出要使用的 loader。 ### CSS @@ -35,7 +35,41 @@ npm install sass-loader node-sass --save-dev } ``` -如要获得更多关于 `vue-loader` 的配置信息，请查看 [Loader 进阶配置](./advanced.md) 章节。 +如要获得更多关于 `vue-loader` 的配置信息，请查看 [loader 进阶配置](./advanced.md)章节。 + +### 加载一个全局设置文件 + +在每个组件里加载一个设置文件，而无需每次都将其显式导入，是一个常见的需求。比如为所有组件全局使用 scss 变量。为了达成此目的： + +``` bash +npm install sass-resources-loader --save-dev +``` + +然后增加下面的 webpack 规则： + +``` js +{ + loader: 'sass-resources-loader', + options: { + resources: path.resolve(__dirname, '../src/style/_variables.scss') + } +} +``` + +举个例子，如果你使用了 [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack)，请如下修改 `build/utils.js`： + +``` js +scss: generateLoaders('sass').concat( + { + loader: 'sass-resources-loader', + options: { + resources: path.resolve(__dirname, '../src/style/_variables.scss') + } + } +), +``` + +在这个文件里，为了避免在最终编译后的文件中出现重复的 CSS，建议只包含变量、mixins 等。 ### JavaScript @@ -53,7 +87,7 @@ npm install coffee-loader --save-dev ### 模版 -模版的处理方式略有不同，因为大多数 Webpack 模版处理器（比如 `pug-loader`）会返回模版处理函数，而不是编译的 HTML 字符串，我们使用原始的 `pug` 替代 `pug-loader`: +模版的处理方式略有不同，因为大多数 Webpack 模版处理器 (比如 `pug-loader`) 会返回模版处理函数，而不是编译的 HTML 字符串，我们使用原始的 `pug` 替代 `pug-loader`： ``` bash npm install pug --save-dev @@ -66,11 +100,11 @@ div ``` -> **重要:** 如果你使用 `vue-loader@<8.2.0`， 你还需要安装 `template-html-loader`。 +> **重要:** 如果你使用 `vue-loader@<8.2.0`，你还需要安装 `template-html-loader`。 ### 行内 Loader Requests -你可以在 `lang` 属性中使用 [Webpack loader requests](https://webpack.github.io/docs/loaders.html#introduction) ： +你可以在 `lang` 属性中使用 [Webpack loader requests](https://webpack.github.io/docs/loaders.html#introduction)： ``` html ``` -但是，这使你的 Vue 组件只适用于 Webpack，不能与 Browserify and [vueify](https://github.com/vuejs/vueify) 一同使用。**如果你打算将你的 Vue 组件作为可重复使用的第三方组件，请避免使用这个语法。** +但是，这使你的 Vue 组件只适用于 Webpack，不能与 Browserify 和 [vueify](https://github.com/vuejs/vueify) 一同使用。**如果你打算将你的 Vue 组件作为可重复使用的第三方组件，请避免使用这个语法。** diff --git a/docs/zh-cn/features/css-modules.md b/docs/zh-cn/features/css-modules.md index 24a689081..d9f24be47 100644 --- a/docs/zh-cn/features/css-modules.md +++ b/docs/zh-cn/features/css-modules.md @@ -1,8 +1,8 @@ -# CSS 模块 +# CSS Modules > 需要 ^9.8.0 -[CSS 模块](https://github.com/css-modules/css-modules) 是一个用于模块化和组合 CSS的流行系统。`vue-loader` 提供了与 CSS 模块的一流集成，可以作为模拟 CSS 作用域的替代方案。 +[CSS Modules](https://github.com/css-modules/css-modules)是一个用于模块化和组合 CSS 的流行系统。`vue-loader` 提供了与 CSS 模块的一流集成，可以作为模拟 CSS 作用域的替代方案。 ### 使用 @@ -19,7 +19,7 @@ ``` -这将为 `css-loader` 打开 CSS 模块模式，生成的 CSS 对象将为组件注入一个名叫 `$style` 的计算属性，你可以在你的模块中使用动态 class 绑定： +这将为 `css-loader` 打开 CSS Modules 模式，生成的 CSS 对象将为组件注入一个名叫 `$style` 的计算属性，你可以在你的模块中使用动态 class 绑定： ``` html