方法: まず [node-sass および sass-loader] 依存関係をインストールし、次に [webpack.base.conf.js] ファイルを開いてルールに scss ルールを追加し、最後に [] に scss ルールを追加します。 < /style>】タグ内にscssスタイルを記述します。 </p></blockquote> <p><img src="https://img.php.cn/upload/article/000/000/024/5fbb18d45ff2d696.jpg" alt=".vue ファイルに scss を記述するにはどうすればよいですか?" ></p> <p>このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6。この方法は、すべてのブランドのコンピューターに適しています。 </p> <p style="white-space: normal;"><span style="font-size: 18px;">#vue プロジェクトでの scss の使用<strong></strong></span></p> <p>1. 最初に依存関係をインストールします<strong></strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>npm install node-sass sass-loader --save-dev</pre><div class="contentsignin">ログイン後にコピー</div></div> <p> 2. <strong>build<code> で </code>webpack.base.conf.js<code> を見つけ、</code>scss<code>rules</code><code> を </code>rules</strong> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] }</pre><div class="contentsignin">ログイン後にコピー</div></div> に追加します。 3. vue ファイルで <h5><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><style lang='scss'> ログイン後にコピー を使用して、vue プロジェクトに scss をグローバルに導入します 1. グローバル参照sass-resources-loader npm install sass-resources-loader --save-devログイン後にコピー 2 をインストールする必要があります。build の utils.js## を変更します。 #scss: generateLoaders('sass')ログイン後にコピー を scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { //你自己的scss全局文件的路径 resources: path.resolve(__dirname, '../src/style/common.scss') } } )ログイン後にコピー に変更します。 関連する推奨事項: 2020 フロントエンド Vue インタビューの質問の概要(回答付き) vue チュートリアルの推奨事項: 2020 年の最新の vue.js ビデオ チュートリアル 5 選プログラミング関連の知識をさらに深めてください。訪問: プログラミング入門! ！
