Q&A実現したいこと
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
以上、拙い文章ではございますが、どなたかご教授いただけると幸いです。
よろしくお願いいたします。
回答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
総合スコア117
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。