web-dev-qa-db-ja.com

angular 6にsassファイルをインポートする方法

Sassで新しいangularプロジェクトを作成し、_variables.scssという名前のファイルを含むsassという名前のフォルダーを作成しました。

アプリコンポーネントでは、このような変数をインポートしようとしました。

@import 'variables'

ng serveを実行すると、次のエラーが表示されます。

./src/app/app.component.scssモジュールのビルドに失敗しました：

@import 'variables'
^
      File to import not found or unreadable: variables.
      in C:\Users\Bonge\Documents\Projects\movies_database\movies-client\src\app\app.component.scss (line 1, column 1)

メモ：angular.jsonに次を追加しました。

"stylePreprocessorOptions": { "includePaths": [ "src/", "src/sass/" ]

ディレクトリ構造はangularスターターアプリのみです。

|- src/
    |- sass/
        |- _variables.scss
        |- _mixins.scss
        |- styles.scss

それでも同じエラーが発生します：ここで何が間違っていますか？助けて

angularsass
14
Hot Zellah

これは古い質問であることに気づきましたが、検索で頻繁に表示されるので、更新が適切であると考えています。 node_modulesライブラリなどのSASSの独自のインポートパスを定義する方法があります。必要なのは、angular.jsonファイルのstylePreprocessorOptionsセクションにoptionsエントリを作成することだけです。 src\sassを使用してすべてを含める必要はありません

angular.json

"options": {
  "outputPath": "dist/App",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "src/tsconfig.app.json",
  "assets": [
    "src/favicon.ico",
    "src/assets"
  ],
  "styles": [
    "src/sass/styles.scss"
  ],
  "stylePreprocessorOptions": {
    "includePaths": [
      "src/sass"
    ]
  },
  "scripts": []
},

その後、あなたのスタイルであなたは単にそれらをインポートすることができます

styles.sass

注：ファイル拡張子または最初の~を含めないでください。

@import 'variables'; // Imports from src/sass
@import 'mixins;
31
Andy Braham

みんなありがとう：

新しいangular v6：インポートsassファイルは、以前のバージョンとは少し異なります。

コンポーネントにこのようにインポートする必要がありました

@import "~src/sass/variables";    // note: without file extension

今、すべてが正常に動作します

助けてくれてありがとう

21
Hot Zellah