docs: add note about CSS static assets [ci skip]

This commit is contained in:
Evan You
2018-08-10 09:14:31 -04:00
parent 2953e2214a
commit 492e567602
5 changed files with 13 additions and 5 deletions
+4
View File
@@ -2,6 +2,10 @@
Vue CLI projects comes with support for [PostCSS](http://postcss.org/), [CSS Modules](https://github.com/css-modules/css-modules) and pre-processors including [Sass](https://sass-lang.com/), [Less](http://lesscss.org/) and [Stylus](http://stylus-lang.com/).
## Referencing Assets
All compiled CSS are processed by [css-loader](https://github.com/webpack-contrib/css-loader), which parses `url()` and resolves them as module requests. This means you can refer to assets using relative paths based on the local file structure. Note if you want to reference a file inside an npm dependency or via webpack alias, the path must be prefixed with `~` to avoid ambiguity. See [Static Asset Handling](./html-and-static-assets.md#static-assets-handling) for more details.
## Pre-Processors
You can select pre-processors (Sass/Less/Stylus) when creating the project. If you did not do so, the internal webpack config is still pre-configured to handle all of them. You just need to manually install the corresponding webpack loaders:
+2 -2
View File
@@ -151,10 +151,10 @@ module.exports = {
- If the URL starts with `~`, anything after it is interpreted as a module request. This means you can even reference assets inside node modules:
``` html
<img src="~/some-npm-package/foo.png">
<img src="~some-npm-package/foo.png">
```
- If the URL starts with `@`, it's also interpreted as a module request. This is useful because Vue CLI by default aliases `@` to `<projectRoot>/src`.
- If the URL starts with `@`, it's also interpreted as a module request. This is useful because Vue CLI by default aliases `@` to `<projectRoot>/src`. **(templates only)**
### The `public` Folder
+5 -1
View File
@@ -1,7 +1,11 @@
# 配合 CSS
# CSS 相关
Vue CLI 项目天生支持 [PostCSS](http://postcss.org/)、[CSS Modules](https://github.com/css-modules/css-modules) 和包含 [Sass](https://sass-lang.com/)、[Less](http://lesscss.org/)、[Stylus](http://stylus-lang.com/) 在内的预处理器。
## 引用静态资源
所有编译后的 CSS 都会通过 [css-loader](https://github.com/webpack-contrib/css-loader) 来解析其中的 `url()` 引用,并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件,或是想要用 webpack alias,则需要在路径前加上 `~` 的前缀来避免歧义。更多细节请参考[处理静态资源](./html-and-static-assets.md#处理静态资源)。
## 预处理器
你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好,内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader
+1 -1
View File
@@ -139,7 +139,7 @@ h('img', { attrs: { src: require('./image.png') }})
<img src="~/some-npm-package/foo.png">
```
- 如果 URL 以 `@` 开头,它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 `<projectRoot>/src` 的别名 `@`。
- 如果 URL 以 `@` 开头,它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 `<projectRoot>/src` 的别名 `@`。**(仅作用于模版中)**
### `public` 文件夹
+1 -1
View File
@@ -1,4 +1,4 @@
# 配合 webpack
# webpack 相关
## 简单的配置方式