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

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

ただいまの
回答率

88.83%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,194

stakizawa

score 83

実現したいこと

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の中身

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で記述

 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ファイル以外がビルドされた形になりました。

 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ページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

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

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


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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.83%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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