質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

1回答

6960閲覧

vue.config.jsでのscssファイルのビルド方法

stakizawa

総合スコア117

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2020/03/29 08:39

実現したいこと

src/static/scssディレクトリ内のscssファイルをvue.config.jsでビルドしたいです。

ディレクトリ構成

vue_project/ ├─src/ │ ├─static/ │ │ ├─scss/ │ │ │ └─style.scss # このファイルをビルドしたい │ │ └─js/ │ ├─views/ │ ├─store/ │ ├─router/ │ ├─plugins/ │ ├─components/ │ ├─assetes/ │ ├─App.vue/ │ └─main.js/ │ ├─node_modules/ └─bundles/ ├─js/ ├─img/ ├─css/ ├─scss/ # このディレクトリにビルドしたい └─index.html

vue.config.jsの中身

javascript

1const path = require('path') 2const BundleTracker = require('webpack-bundle-tracker') 3 4module.exports = { 5 publicPath: 'http://192.168.33.12:8080', 6 outputDir: './bundles/', 7 chainWebpack: config => { 8 config.optimization 9 .splitChunks(false) 10 11 config 12 .plugin('BundleTracker') 13 .use(BundleTracker, [{filename: '../client/webpak-stats.json'}]) 14 15 config.devServer 16 .public('http://192.168.33.12:8080') 17 .host('192.168.33.12') 18 .port(8080) 19 .hotOnly(true) 20 .watchOptions({poll: 1000}) 21 .https(false) 22 .headers({"Access-Control-Allow-Origin": ["*"]}) 23 24 // config.module 25 // .rule('sass') 26 // .test(/.s[ac]ss$/) 27 // .use('sass') 28 // .loader('sass-loader') 29 // .end() 30 31 }, 32 // module: { 33 // rules: [ 34 // { 35 // test: /.s[ac]ss$/i, 36 // use: [ 37 // // Creates `style` nodes from JS strings 38 // 'style-loader', 39 // // Translates CSS into CommonJS 40 // 'css-loader', 41 // // Compiles Sass to CSS 42 // 'sass-loader', 43 // ], 44 // }, 45 // ], 46 // }, 47 css: { 48 loaderOptions: { 49 sass: { 50 data: `@import "@/style.scss";` 51 // includePaths: [path.resolve(__dirname, 'src/static/scss/')] 52 } 53 } 54 }, 55}

エラーメッセージ

css: { loaderOptions: { sass: { data: `@import "@/style.scss";` // includePaths: [path.resolve(__dirname, 'src/static/scss/')] } } },

上記のコードでnpm run buildを実行すると下記のエラーが出力されます。

error in ./node_modules/vuetify/src/components/VDatePicker/VDatePickerTable.sass Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'data'. These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? } at validate (/home/vagrant/django_vue_test/client/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:85:11) at Object.loader (/home/vagrant/django_vue_test/client/node_modules/sass-loader/dist/index.js:36:28) at runLoaders (/home/vagrant/django_vue_test/client/node_modules/webpack/lib/NormalModule.js:316:20) at /home/vagrant/django_vue_test/client/node_modules/loader-runner/lib/LoaderRunner.js:367:11 at /home/vagrant/django_vue_test/client/node_modules/loader-runner/lib/LoaderRunner.js:233:18 at runSyncOrAsync (/home/vagrant/django_vue_test/client/node_modules/loader-runner/lib/LoaderRunner.js:143:3) at iterateNormalLoaders (/home/vagrant/django_vue_test/client/node_modules/loader-runner/lib/LoaderRunner.js:232:2) at Array.<anonymous> (/home/vagrant/django_vue_test/client/node_modules/loader-runner/lib/LoaderRunner.js:205:4) at Storage.finished (/home/vagrant/django_vue_test/client/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16) at provider (/home/vagrant/django_vue_test/client/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9) at /home/vagrant/django_vue_test/client/node_modules/graceful-fs/graceful-fs.js:115:16 at FSReqWrap.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:53:3) @ ./node_modules/vuetify/lib/components/VDatePicker/mixins/date-picker-table.js 12:0-70 @ ./node_modules/vuetify/lib/components/VDatePicker/VDatePickerMonthTable.js @ ./node_modules/vuetify/lib/components/VDatePicker/VDatePicker.js @ ./node_modules/vuetify/lib/components/VDatePicker/index.js @ ./node_modules/vuetify/lib/components/index.js @ ./node_modules/vuetify/lib/index.js @ ./src/plugins/vuetify.js @ ./src/main.js @ multi ./src/main.js ERROR Build failed with errors. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! client@0.1.0 build: `vue-cli-service build --no-clean` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the client@0.1.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/vagrant/.npm/_logs/2020-03-29T07_59_41_300Z-debug.log

試したこと

1.modelsで記述

javascript

1 module: { 2 rules: [ 3 { 4 test: /.s[ac]ss$/i, 5 use: [ 6 // Creates `style` nodes from JS strings 7 'style-loader', 8 // Translates CSS into CommonJS 9 'css-loader', 10 // Compiles Sass to CSS 11 'sass-loader', 12 ], 13 }, 14 ], 15 },

上記のように、記述したところvue.config.jsではこの書き方はできないというようなエラーが出力されました。

2.chainWebpack.config内で記述

chainWebpack内のconfig.modelsで記述したところエラーは吐かず、scssファイル以外がビルドされた形になりました。

javascript

1 config.module 2 .rule('sass') 3 .test(/.s[ac]ss$/) 4 .use('sass') 5 .loader('sass-loader') 6 .end()

環境

  • VirtualBox
  • vagrant
  • centos-7
  • Python 3.7.0
  • Django 2.5.5
  • Vue.js 2.6.11
  • vue/cli 4.2.3
  • Vuetify 2.2.11

以上、拙い文章ではございますが、どなたかご教授いただけると幸いです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

vue.config.jsに以下の設定を記述

javascript

1// vue.config.js 2 css: { 3 loaderOptions: { 4 scss: { 5 // prependDataの部分が、data:だとビルドエラーになる 6 prependData: '@import "./src/static/scss/prepends.scss";' 7 } 8 } 9 }

上記の記述で、全体に読み込むSCSSファイルを指定できます。
また、ここに記述することで、ビルド時に生のCSSを吐き出さないように設定できます。
例えば、variableなどです。

逆に、生のCSSファイルを吐き出したいSCSSファイルは、main.jsに以下の記述をすることで解決します。

javascript

1// main.js 2require('@\static\scss\main.scss')

投稿2020/04/07 01:10

stakizawa

総合スコア117

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問