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

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

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

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

Vue CLI

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Sass

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

Q&A

1回答

2144閲覧

Vueでsass, scssが使えない

ryohasegawa

総合スコア437

Vue.js

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

Vue CLI

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Sass

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

0グッド

0クリップ

投稿2021/03/30 11:49

編集2022/01/12 10:55

Vue CLI4.5.12でsassが使えなく困っています。

1.まず何もインストールしない状態でVueRouterをインストールして生成されたAbout.vueを編集しました。
2.するとエラーが出ます。(当然)
イメージ説明
3.言われたとおりsass-loaderをインストールしようと思い試みてもエラでインストールされません。(コンソールで実行)
4.コンソール上からできなかったため、VueCli上からインストールしてみるとエラーメッセージが変わります…
イメージ説明
イメージ説明
原因は何なのでしょうか?

各種バージョン

npm 7.7.5
Vue/CLI 4.5.12
Vue 3.0.9
vue/compiler-sfc 3.0.9
babel-eslint 10.1.0
eslint 6.8.0

コード

<template> <div class="about"> <h1>This is an about page</h1> </div> </template> <style scoped lang="sass"> div{ color: orange; } </style>

3のエラー

> npm install sass-loader npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: webpack@4.46.0 npm ERR! node_modules/webpack npm ERR! peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6 npm ERR! node_modules/@intervolga/optimize-cssnano-plugin npm ERR! @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/cli-service@4.5.12 npm ERR! node_modules/@vue/cli-service npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.12 npm ERR! node_modules/@vue/cli-plugin-babel npm ERR! dev @vue/cli-plugin-babel@"~4.5.0" from the root project npm ERR! 4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...) npm ERR! peer webpack@"^4.0.0 || ^5.0.0" from @soda/friendly-errors-webpack-plugin@1.8.0 npm ERR! node_modules/@soda/friendly-errors-webpack-plugin npm ERR! @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/cli-service@4.5.12 npm ERR! node_modules/@vue/cli-service npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.12 npm ERR! node_modules/@vue/cli-plugin-babel npm ERR! dev @vue/cli-plugin-babel@"~4.5.0" from the root project npm ERR! 4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...) npm ERR! 19 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! sass-loader@"*" from the root project npm ERR! npm ERR! Conflicting peer dependency: webpack@5.28.0 npm ERR! node_modules/webpack npm ERR! peer webpack@"^5.0.0" from sass-loader@11.0.1 npm ERR! node_modules/sass-loader npm ERR! sass-loader@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\ryoum\AppData\Local\npm-cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ryoum\AppData\Local\npm-cache\_logs\2021-03-30T11_43_23_181Z-debug.log

C:\Users\ryoum\AppData\Local\npm-cache\_logs\2021-03-30T11_43_23_181Z-debug.logの内容は以下です。

log

10 verbose cli [ 20 verbose cli 'C:\Program Files\nodejs\node.exe', 30 verbose cli 'C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js', 40 verbose cli 'install', 50 verbose cli 'sass-loader' 60 verbose cli ] 71 info using npm@7.7.5 82 info using node@v15.12.0 93 timing npm:load:whichnode Completed in 1ms 104 timing config:load:defaults Completed in 1ms 115 timing config:load:file:C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\npmrc Completed in 3ms 126 timing config:load:builtin Completed in 3ms 137 timing config:load:cli Completed in 1ms 148 timing config:load:env Completed in 0ms 159 timing config:load:file:C:\Program1\mycontrol.npmrc Completed in 0ms 1610 timing config:load:project Completed in 0ms 1711 timing config:load:file:C:\Users\ryoum.npmrc Completed in 0ms 1812 timing config:load:user Completed in 1ms 1913 timing config:load:file:C:\Users\ryoum\AppData\Roaming\npm\etc\npmrc Completed in 0ms 2014 timing config:load:global Completed in 0ms 2115 timing config:load:validate Completed in 0ms 2216 timing config:load:setEnvs Completed in 1ms 2317 timing config:load Completed in 7ms 2418 timing npm:load:configload Completed in 8ms 2519 timing npm:load:setTitle Completed in 0ms 2620 timing npm:load:setupLog Completed in 0ms 2721 timing npm:load:cleanupLog Completed in 1ms 2822 timing npm:load:configScope Completed in 0ms 2923 timing npm:load:projectScope Completed in 1ms 3024 timing npm:load Completed in 12ms 3125 timing config:load:flatten Completed in 2ms 3226 timing arborist:ctor Completed in 0ms 3327 timing idealTree:init Completed in 469ms 3428 timing idealTree:userRequests Completed in 2ms 3529 silly idealTree buildDeps 3630 silly fetch manifest sass-loader@* 3731 verbose shrinkwrap failed to load node_modules/.package-lock.json out of date, updated: node_modules 3832 http fetch GET 304 https://registry.npmjs.org/sass-loader 541ms (from cache) 3933 silly fetch manifest fibers@>= 3.1.0 4034 http fetch GET 304 https://registry.npmjs.org/fibers 34ms (from cache) 4135 silly fetch manifest node-sass@^4.0.0 || ^5.0.0 4236 http fetch GET 304 https://registry.npmjs.org/node-sass 42ms (from cache) 4337 silly fetch manifest sass@^1.3.0 4438 http fetch GET 304 https://registry.npmjs.org/sass 58ms (from cache) 4539 silly fetch manifest webpack@^5.0.0 4640 http fetch GET 304 https://registry.npmjs.org/webpack 48ms (from cache) 4741 timing idealTree Completed in 1217ms 4842 timing command:install Completed in 1223ms 4943 verbose stack Error: unable to resolve dependency tree 5043 verbose stack at Arborist.[failPeerConflict] (C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1157:25) 5143 verbose stack at Arborist.[placeDep] (C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1256:32) 5243 verbose stack at C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:851:46 5343 verbose stack at Array.map (<anonymous>) 5443 verbose stack at Arborist.[buildDepStep] (C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:851:8) 5543 verbose stack at async Arborist.buildIdealTree (C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:209:7) 5643 verbose stack at async Promise.all (index 1) 5743 verbose stack at async Arborist.reify (C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:131:5) 5843 verbose stack at async Install.install (C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\lib\install.js:137:5) 5944 verbose cwd C:\Program1\mycontrol 6045 verbose Windows_NT 10.0.19042 6146 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\ryoum\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install" "sass-loader" 6247 verbose node v15.12.0 6348 verbose npm v7.7.5 6449 error code ERESOLVE 6550 error ERESOLVE unable to resolve dependency tree 6651 error 6752 error Found: webpack@4.46.0 6852 error node_modules/webpack 6952 error peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6 7052 error node_modules/@intervolga/optimize-cssnano-plugin 7152 error @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/cli-service@4.5.12 7252 error node_modules/@vue/cli-service 7352 error peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.12 7452 error node_modules/@vue/cli-plugin-babel 7552 error dev @vue/cli-plugin-babel@"~4.5.0" from the root project 7652 error 4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...) 7752 error peer webpack@"^4.0.0 || ^5.0.0" from @soda/friendly-errors-webpack-plugin@1.8.0 7852 error node_modules/@soda/friendly-errors-webpack-plugin 7952 error @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/cli-service@4.5.12 8052 error node_modules/@vue/cli-service 8152 error peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.12 8252 error node_modules/@vue/cli-plugin-babel 8352 error dev @vue/cli-plugin-babel@"~4.5.0" from the root project 8452 error 4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...) 8552 error 19 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...) 8652 error 8752 error Could not resolve dependency: 8852 error sass-loader@"*" from the root project 8952 error 9052 error Conflicting peer dependency: webpack@5.28.0 9152 error node_modules/webpack 9252 error peer webpack@"^5.0.0" from sass-loader@11.0.1 9352 error node_modules/sass-loader 9452 error sass-loader@"*" from the root project 9552 error 9652 error Fix the upstream dependency conflict, or retry 9752 error this command with --force, or --legacy-peer-deps 9852 error to accept an incorrect (and potentially broken) dependency resolution. 9952 error 10052 error See C:\Users\ryoum\AppData\Local\npm-cache\eresolve-report.txt for a full report. 10153 verbose exit 1 102

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

node-sassはインストールされましたか?
またsass-loaderが最新版ですとエラーが出てしまう可能性があるようですので、
一旦sass-loaderをアンインストールしてバージョンを落として再インストールしてみてはいかがでしょうか

投稿2021/03/31 08:38

black-ddd

総合スコア74

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問