From a524b04e70dc312dbc655a0402f6aef77f2935f1 Mon Sep 17 00:00:00 2001 From: numa Date: Thu, 17 Sep 2020 01:09:58 +0900 Subject: [PATCH 1/2] docs(ja): add original --- .../configuration-css.md | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 content/ja/guides/configuration-glossary/configuration-css.md diff --git a/content/ja/guides/configuration-glossary/configuration-css.md b/content/ja/guides/configuration-glossary/configuration-css.md new file mode 100644 index 0000000000..c8fb6c891e --- /dev/null +++ b/content/ja/guides/configuration-glossary/configuration-css.md @@ -0,0 +1,51 @@ +--- +title: 'The css Property' +description: Nuxt.js lets you define the CSS files/modules/libraries you want to set globally (included in every page). +menu: css +category: configuration-glossary +position: 4 +--- + +> Nuxt.js lets you define the CSS files/modules/libraries you want to set globally (included in every page). + +In case you want to use `sass` make sure that you have installed `node-sass` and `sass-loader` packages. If you didn't just + +```sh +npm install --save-dev node-sass sass-loader +``` + +- Type: `Array` + - Items: `string` + +```js{}[nuxt.config.js] +export default { + css: [ + // Load a Node.js module directly (here it's a Sass file) + 'bulma', + // CSS file in the project + '@/assets/css/main.css', + // SCSS file in the project + '@/assets/css/main.scss' + ] +} +``` + +Nuxt.js will automatically guess the file type by its extension and use the appropriate pre-processor loader for webpack. You will still need to install the required loader if you need to use them. + +### Style Extensions + +You can omit the file extension for CSS/SCSS/Postcss/Less/Stylus/... files listed in the css array in your nuxt config file. + +```js{}[nuxt.config.js] +export default { + css: ['~/assets/css/main', '~/assets/css/animations'] +} +``` + + + +If you have two files with the same name eg. `main.scss` and `main.css`, and don't specify an extension in the css array entry, eg. `css: ['~/assets/css/main']`, then only one file will be loaded depending on the order of `styleExtensions`. In this case only the `css` file will be loaded and the `scss` file will be ignored because `css` comes first in the default `styleExtension` array. + + + +Default order: `['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']` From 657c521c2008701b1973518d878d207ac621f003 Mon Sep 17 00:00:00 2001 From: numa Date: Thu, 17 Sep 2020 01:34:09 +0900 Subject: [PATCH 2/2] docs(ja): translate configuration-css --- .../configuration-css.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/content/ja/guides/configuration-glossary/configuration-css.md b/content/ja/guides/configuration-glossary/configuration-css.md index c8fb6c891e..25d4f62e2e 100644 --- a/content/ja/guides/configuration-glossary/configuration-css.md +++ b/content/ja/guides/configuration-glossary/configuration-css.md @@ -1,40 +1,40 @@ --- -title: 'The css Property' -description: Nuxt.js lets you define the CSS files/modules/libraries you want to set globally (included in every page). +title: 'css プロパティ' +description: 'Nuxt.js ではグローバルに適用したい（すべてのページにインクルードしたい）CSS ファイル/モジュール/ライブラリを設定できます。' menu: css category: configuration-glossary position: 4 --- -> Nuxt.js lets you define the CSS files/modules/libraries you want to set globally (included in every page). +> Nuxt.js ではグローバルに適用したい（すべてのページにインクルードしたい）CSS ファイル/モジュール/ライブラリを設定できます。 -In case you want to use `sass` make sure that you have installed `node-sass` and `sass-loader` packages. If you didn't just +`sass` を利用したい場合は `node-sass` および `sass-loader` パッケージをインストールしてください。もしインストールしていない場合は以下のようにインストールしてください。 ```sh npm install --save-dev node-sass sass-loader ``` -- Type: `Array` - - Items: `string` +- 型: `Array` + - 要素: `string` ```js{}[nuxt.config.js] export default { css: [ - // Load a Node.js module directly (here it's a Sass file) + // Node.js モジュールを直接ロードする (ここでは SASS ファイル) 'bulma', - // CSS file in the project + // プロジェクト内の CSS ファイル '@/assets/css/main.css', - // SCSS file in the project + // プロジェクト内の SCSS ファイル '@/assets/css/main.scss' ] } ``` -Nuxt.js will automatically guess the file type by its extension and use the appropriate pre-processor loader for webpack. You will still need to install the required loader if you need to use them. +Nuxt.js は拡張子から自動的にファイルタイプを推測して webpack のための適切なプリプロセッサローダを使用します。ただし使用する必要のあるローダーは各自でインストールしてください。 -### Style Extensions +### スタイルの拡張子 -You can omit the file extension for CSS/SCSS/Postcss/Less/Stylus/... files listed in the css array in your nuxt config file. +nuxt.config.js の css 配列に指定するファイル（CSS/SCSS/Postcss/Less/Stylus/...）の拡張子を省略できます。 ```js{}[nuxt.config.js] export default { @@ -44,8 +44,8 @@ export default { -If you have two files with the same name eg. `main.scss` and `main.css`, and don't specify an extension in the css array entry, eg. `css: ['~/assets/css/main']`, then only one file will be loaded depending on the order of `styleExtensions`. In this case only the `css` file will be loaded and the `scss` file will be ignored because `css` comes first in the default `styleExtension` array. +`main.scss` と `main.css` のように同じ名前のファイルを 2 つ持っていて css 配列に拡張子を指定しない（例えば `css: ['~/assets/css/main']`）場合、`styleExtensions` の順序に応じて 1 つのファイルしか読み込まれません。デフォルトの `styleExtension` 配列の 1 番目が `css` なので、今回の場合 `css` ファイルは読み込まれますが `scss` ファイルは無視されます。 -Default order: `['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']` +デフォルトの順序: `['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']`