web-dev-qa-db-ja.com

SASS / SCSSを最新のvue-cliスタータープロジェクトで使用する方法は？

プロジェクトでSASSまたはSCSSを使用する必要があります。

Vue-cliを使用して、スタータープロジェクトの最新バージョンを作成しました。

Webpackを使用して最新のスタータープロジェクトでsass/scssを動作させることに成功した人はいますか？

webpacksassvue.jsvuejs2vue-component
24
CommonSenseCode

  1. 必要な依存関係をインストールします

    npm install -D node-sass sass-loader

  2. グローバルスタイルの場合は、ファイルをmain.jsにインポートするだけです。

    import './styles/my-styles.scss'

  3. .vueファイルで、<style>要素に言語を追加します。

    <style lang="scss">

Webstormを使用している場合：

<style lang="scss" rel="stylesheet/scss">

52
Linus Borg

@vue/cli-service": "^3.9.0"の最新ドキュメントとして、最初に2つのnpm dev依存関係、つまりsass、sass-loaderをインストールする必要があります

Sass

npm install -D sass-loader sass

yarn add --dev sass-loader sass

次に、対応するファイルタイプをインポートするか、*。vueファイルでそれらを次のように使用します。

<style lang="scss">
  $color: red;
</style>

最新のドキュメントはこちら を参照してください

0
Prafull Sharma

これをscriptsのpackage.jsonに追加して実行します

"compile:sass": "node-sass 'your main scss file location' 'your compiled css file location' -w"

node-sassおよびsass-loaderが適切に追加されていることを確認してください。

そして、App.vueファイルにこれを追加して、実行します

<style lang="scss">

    @import 'your compiled css file location';

</style>

これは私のために動作します。

ありがとう

0
emon