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

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

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

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

Vue CLI

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

ビルド

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

Sass

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

解決済

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

stakizawa
stakizawa

総合スコア117

Vue.js

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

Vue CLI

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

ビルド

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

Sass

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

1回答

0評価

0クリップ

5417閲覧

投稿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

const path = require('path') const BundleTracker = require('webpack-bundle-tracker') module.exports = { publicPath: 'http://192.168.33.12:8080', outputDir: './bundles/', chainWebpack: config => { config.optimization .splitChunks(false) config .plugin('BundleTracker') .use(BundleTracker, [{filename: '../client/webpak-stats.json'}]) config.devServer .public('http://192.168.33.12:8080') .host('192.168.33.12') .port(8080) .hotOnly(true) .watchOptions({poll: 1000}) .https(false) .headers({"Access-Control-Allow-Origin": ["*"]}) // config.module // .rule('sass') // .test(/.s[ac]ss$/) // .use('sass') // .loader('sass-loader') // .end() }, // module: { // rules: [ // { // test: /.s[ac]ss$/i, // use: [ // // Creates `style` nodes from JS strings // 'style-loader', // // Translates CSS into CommonJS // 'css-loader', // // Compiles Sass to CSS // 'sass-loader', // ], // }, // ], // }, css: { loaderOptions: { sass: { data: `@import "@/style.scss";` // includePaths: [path.resolve(__dirname, 'src/static/scss/')] } } }, }

エラーメッセージ

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

module: { rules: [ { test: /.s[ac]ss$/i, use: [ // Creates `style` nodes from JS strings 'style-loader', // Translates CSS into CommonJS 'css-loader', // Compiles Sass to CSS 'sass-loader', ], }, ], },

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

2.chainWebpack.config内で記述

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

javascript

config.module .rule('sass') .test(/.s[ac]ss$/) .use('sass') .loader('sass-loader') .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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Vue CLI

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

ビルド

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

Sass

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