vue-loader

vue-loader 是 webpack 中用來解析 .vue 的工具 了解 ".vue" 裡面如何使用 scss；PostCSS 怎麼配合工作?

// 流程
.vue scss > webpack - sass loader > css > webpack - postcss loader > css #

使用预处理器

在 webpack 中，所有的预处理器需要匹配对应的 loader。

vue-loader 允许你使用其它 webpack loader 处理 Vue 组件 (.vue) 的某一部分。 .vue 根據內部的標籤的 lang 属性自动推断出要使用的 loader (e.g. <style lang="sass">)。

vue-loader 使用 PostCSS

1. 使用配置文件 因為 vue-loader 支持透過 postcss-loader 自动加载同一个配置文件（.postcssrc or postcss.config.js or package.json 中的 postcss 屬性範圍）。 postcss-loader 會用 cosmiconfig 的方式尋找這個 configuration object（配置文件） 這樣，你可以在由 postcss-loader 处理的「普通 CSS 文件」和 「*.vue 文件中的 CSS」 之间共享相同的配置，这是推荐的做法。

2. 配合 postcss-loader 使用 因为 vue-loader 内部通过 PostCSS 处理其样式，你只需要对标准的 CSS 文件应用 postcss-loader 即可。 即專案中有 PostCSS 配置文件，就不用在 <style> 指定 lang="postcss"。 如果没有 loader (通过 vue-loader 自身的 loaders 选项) 显式配置下列 PostCSS 扩展， 则它们只会简单的进行 vue-loader 的默认 PostCSS 转换： postcss、pcss、sugarss、sss。

3. inline OPtion 或者，你可以使用 vue-loader 的 postcss options 来为 .vue 文件指定配置。

   // webpack.config.js
   module.exports = {
   // other options...
   module: {
    // `module.rules` is the same as `module.loaders` in 1.x
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        // `vue-loader` options goes here
        options: {
          // ...
          postcss: [require('postcss-cssnext')()]
        }
      }
    ]
   }
   }
   

PostCSS 需要一個 configuration object 配置檔物件做運行的依據， 通常會用 cosmiconfig 方式尋找。

vue-loader 有三種方法使用 PostCSS：

• vue-loader 内部通过 PostCSS 处理其样式，

  • vue-loader 支持通过 postcss-loader 自动加载同一个配置文件。
  • 即專案中存在 PostCSS 配置文件，无需在样式块上指定 lang="postcss"。
  • 你可以使用 vue-loader 的 postcss 选项来为 .vue 文件指定配置。

• vue-loader 配合 postcss-loader 使用，因此只需要对标准的 CSS 文件应用 postcss-loader 即可。

.vue 預設透過 postcss-loader 輸出 CSS（即不用特別寫 lang="postcss"）。 只需要對外部 css 檔案应用 postcss-loader 即可。

PostCSS 需要一份配置文件（configuration object）， postcss-loader 會用 cosmiconfig 方式尋找。

或者，你可以使用 vue-loader 的 postcss 选项来为 .vue 文件指定配置。 用 vue-loader 的 option 来指定配置。

css-loader

解释 (interpret) @import 和 url() ，会 import / require() 后再解析 (resolve) 它们。

sugarss

基於 CSS 縮進，給 PostCSS 的語法糖： https://github.com/postcss/sugarss，如果要寫，就要設定解析方式為 sugarss

vue-loader

前端自動化工具，目前用到：

• scss：是 css 預處理，用 sass 寫 css 後經過編譯，才會變成標準 css。
• postcss：他是檢測 css 之後，用 js 去調整 css 成符合各瀏覽器需求、版本的寫法。可以放在流程管理工具中。
• webpack：前端管理打包工具
• vue-loader：是 webpack 中用來解析 ".vue" 檔案的工具

了解 ".vue" 裡面如何使用 scss；PostCSS 怎麼配合工作?

vue-loader 可以使用 webpack 的 loader 處理 Vue 组件的某一部分。 它会根据 lang 属性自动推断出要使用的 loader。

e.g. 要用 sass 編譯 <style> ，寫 <style lang="sass"> 就可以編譯 sass。

但 vue-loader 預設使用 PostCSS 處理樣式（不需要特別寫 <style lang="postcss"> ）

使用 PostCSS 和 lint 一樣，會先用 cosmiconfig 來找他所依據的 configuration object 配置檔物件。

文件建議用配置文件來搭配 postcss-loader，這樣「普通 CSS 文件」和 「*.vue 中的 CSS」之間，可共享相同的配置。