CSS関連Vue CLIプロジェクトは、PostCSS、CSS Modules、およびSass、Less、Stylusを含むプリプロセッサを生まれつきサポートします.

静的リソースの参照

コンパイルされたCSSはすべてcss-loaderによってurl()参照を解析し、これらの参照をモジュール要求として処理します.これは、ローカルのファイル構造に基づいて相対パスで静的リソースを参照できることを意味します.また、npm依存のファイルを参照したい場合や、webpack aliasを使用したい場合は、パスの前に~の接頭辞を付けて曖昧さを避ける必要があります.詳細については、静的リソースの処理を参照してください.

プリプロセッサ

プロジェクトを作成するときにプリプロセッサ(Sass/Loss/Stylus)を選択できます.当時選択されていなかった場合、内蔵のwebpackはすべての処理を完了できるように事前に構成されています.対応するwebpack loaderを手動でインストールすることもできます.

Sass

npm install -D sass-loader node-sass

Less

npm install -D less-loader less

Stylus

npm install-D stylus-loader stylusその後、対応するファイルタイプをインポートしたり、*.vueファイルでは、次のように使用されます.

インポートの自動化

インポートファイル(色、変数、mixin......)を自動化したい場合は、style-resources-loaderを使用します.ここでは、Stylusについて、各単一ファイルコンポーネントとStylusファイルにインポートします./src/styles/imports.stylの例:

// vue.config.js
const path = require('path')

module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/styles/imports.styl'),
      ],
    })
}

vue-cli-plugin-style-resources-loaderを使用することもできます.

PostCSS

Vue CLI内部にはPostCSSが使用されている.
通過できますpostcssrcまたは任意のpostcss-load-configがサポートする構成ソースでPostCSSを構成します.vueを通過することもできる.config.jsのcss.loaderOptions.postcssはpostcss-loaderを構成します.
autoprefixerがデフォルトでオンになっています.ターゲットブラウザを構成する場合はpackageを使用します.jsonのbrowserslistフィールド.
CSSにおけるブラウザプレフィックス規則に関する注意事項
本番環境構築では、Vue CLIはCSSを最適化し、ターゲットブラウザに基づいて不要なブラウザプレフィックス規則を破棄します.autoprefixerがデフォルトでオンになっているため、接頭辞のないCSSルールのみを使用できます.

CSS Modules

あなたは
JavaScriptでCSS ModulesとしてCSSまたは他の前処理ファイルをインポートする場合は、そのファイルは.module.(css|less|sass|scss|styl)末尾:

import styles from './foo.module.css'

//サポートされているすべてのプリプロセッサは、import sassStyles from'./foo.module.scss'ファイル名を削除したい場合はmodule、vueを設定できます.config.jsのcss.requireModuleExtensionはfalseです.

// vue.config.js
module.exports = {
  css: {
    requireModuleExtension: false
  }
}

生成されたCSS Modulesモジュールのクラス名をカスタマイズする場合は、vueを使用します.config.jsのcss.loaderOptions.cssオプションで実現します.すべてのcss-loaderオプションは、localIdentNameやcamelCaseなど、ここでサポートされています.

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        localIdentName: '[name]-[hash]',
        camelCase: 'only'
      }
    }
  }
}

プリプロセッサLoaderへのオプションの転送

Webpackのプリプロセッサloaderにオプションを渡したい場合があります.vueを使ってもいいです.config.jsのcss.loaderOptionsオプション.たとえば、共有するグローバル変数をすべてのSass/Lossスタイルに入力できます.

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      //   sass-loader     
      sass: {
        // @/   src/    
        //          `src/variables.sass`     
        //   ：  sass-loader v7  ，       "data"
        prependData: `@import "~@/variables.sass"`
      },
      //       `sass`        `sass`   `scss`       
      //    `scss`          sass-loader    
      //       `data`      
      // `scss`               ，`sass`          
      //       ，       `scss`   ，  `scss`         
      scss: {
        prependData: `@import "~@/variables.scss";`
      },
      //   less-loader    Less.js     
      less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }
    }
  }
}

LoaderはloaderOptionsで構成できます.

css-loader
postcss-loader
sass-loader
less-loader
stylus-loader