css プロパティ
Nuxt ではグローバルに適用したい(すべてのページにインクルードしたい)CSS ファイル/モジュール/ライブラリを設定できます。
sass
を利用したい場合は sass
および sass-loader
パッケージをインストールしてください。もしインストールしていない場合は以下のようにインストールしてください。
Yarn
yarn add --dev sass sass-loader@10
NPM
npm install --save-dev sass sass-loader@10
-
型:
Array
-
要素:
string
-
要素:
nuxt.config.js
export default {
css: [
// Node.js モジュールを直接ロードする (ここでは Sass ファイル)
'bulma',
// プロジェクト内の CSS ファイル
'@/assets/css/main.css',
// プロジェクト内の SCSS ファイル
'@/assets/css/main.scss'
]
}
Nuxt は拡張子から自動的にファイルタイプを推測して webpack のための適切なプリプロセッサローダを使用します。ただし使用する必要のあるローダーは各自でインストールしてください。
スタイルの拡張子
nuxt.config.js の css 配列に指定するファイル(CSS/SCSS/Postcss/Less/Stylus/...)の拡張子を省略できます。
nuxt.config.js
export default {
css: ['~/assets/css/main', '~/assets/css/animations']
}
main.scss
と main.css
のように同じ名前のファイルを 2 つ持っていて css 配列に拡張子を指定しない(例えば css: ['~/assets/css/main']
)場合、styleExtensions
の順序に応じて 1 つのファイルしか読み込まれません。デフォルトの styleExtension
配列の 1 番目が css
なので、今回の場合 css
ファイルは読み込まれますが scss
ファイルは無視されます。デフォルトの順序: ['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']
このページをGitHubで編集する
更新日 Mon, Aug 19, 2024












































