vue-cliで作ったプロジェクトに以下のようにsassを読み込んで使ってます。
<template> <div class="info">test</div> </template> <script> </script> <style lang="sass"> .info { font-size: 50px; } </style>
ここに記載したsassファイルを
.vueファイルに直接記載せず自動的に読み込むませるため
rootディレクトリ直下にsrc/test.scssを作って.info { font-size: 50px; }
この設定を入れました。
そしてvue.config.jsを以下のように設定してnpm run serve
しましたが、scssは読み込んでくれませんでした。
module.exports = { css: { loaderOptions: { // pass options to sass-loader sass: { // @/ is an alias to src/ // so this assumes you have a file named `src/variables.scss` data: `@import "./src/test.scss";` } } } };
自分の設定で誤りがありましたらご指摘いただけますでしょうか。
エラーとかも吐いてくれないですが、webpackの設定がうまく動いてない場合、トラブルシューティングする方法も
知りたいです。
現在失敗してるコードはこちらにまとめておきました。
https://github.com/negabaro/vue-import-scss-example/blob/master/vue.config.js#L8
以上、よろしくおねがいします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/17 03:29
2019/04/17 04:15