Q&A
aliasを使っても問題は解決できませんでした
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件
0
ベストアンサー
sass-loaderのdataオプションはエントリファイルのsassコードを先頭に追加する(prepend Sass code before the actual entry file)オプションのようです。
https://github.com/webpack-contrib/sass-loader#environment-variables
App.vueに以下を記載するなどして、sassのエントリファイルが生成されるようにする。
html
1<style lang="sass">/* */</style>
ただ、そもそもsass-loaderのdataオプションではなく、main.jsに以下を記載するのではダメなのでしょうか。
javascript
1import './test.scss';
投稿2019/04/17 01:21
総合スコア448
0
公式サイトの通り、かつご提示されているコードのコメントの通りですが、@/がsrc/の別名ですので、これを利用します。
module.exports = { css: { loaderOptions: { sass: { data: `@import "@/test.scss";` } } } };
2019/04/18 追記
すでに他の方の回答で解決しているようですが、補足します。
ご提示されているGithubのコードをダウンロードして動作確認しましたが、普通に動きますね。
おそらくですが、以下のいずれかに該当していませんか？
yarn run serveしたままで、vue.config.jsを編集した（再起動していない）- vueファイルの
<style>にlang="sass"またはlang="scss"を指定していない
1の場合、vue.config.jsの変更・保存は監視されていないので即時反映はされません。
2の場合、スタイル部分がCSSとして処理されるので、vue.config.jsのsass関連のオプションは無視されます。
投稿2019/04/16 15:02
編集2019/04/17 15:52
総合スコア1260
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/17 03:29
2019/04/17 04:15