タグ付けされた質問 「sass」

したがって、app/assets/stylesheets/次のようなディレクトリ構造があります。 |-dialogs |-mixins |---buttons |---gradients |---vendor_support |---widgets |-pages |-structure |-ui_elements 各ディレクトリには、複数のsassパーシャルがあります（通常は* .css.scssですが、1つまたは2つの* .css.scss.erb）。 私は多くのことを想定しているかもしれませんが*= require_tree .、application.cssにあるため、railsはそれらのディレクトリ内のすべてのファイルを自動的にコンパイルする必要がありますよね？ 最近、すべての色変数を削除してルートapp/assets/stylesheetsフォルダー（_colors.css.scss）のファイルに配置することにより、これらのファイルを再構築しようとしました。次に、app/assets/stylesheets次のようなファイルをmaster.css.scssというルートフォルダーに作成しました。 // Color Palette @import "colors"; // Mixins @import "mixins/buttons/standard_button"; @import "mixins/gradients/table_header_fade"; @import "mixins/vendor_support/rounded_corners"; @import "mixins/vendor_support/rounded_corners_top"; @import "mixins/vendor_support/box_shadow"; @import "mixins/vendor_support/opacity"; Railsがアセットのコンパイルの順序をどのように処理するかはよくわかりませんが、明らかに私の好みではありません。インポートされている変数またはミックスインがあることを認識しているファイルがないようです。そのため、エラーがスローされ、コンパイルできません。 Undefined variable: "$dialog_divider_color". (in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb) Undefined mixin 'rounded_corners'. (in /home/blah/app/assets/stylesheets/widgets.css.scss) 変数$dialog_divider_colorは_colors.css.scssで明確に定義されており、_master.css.scss色とすべてのミックスインをインポートしています。しかし、どうやらレールはそのメモを受け取らなかったようです。 これらのエラーを修正する方法はありますか、それともすべての変数定義を個々のファイルに戻し、すべてのミックスインインポートに戻す必要がありますか？ 残念ながら、この男はそれが可能だとは思わないようですが、私は彼が間違っていることを望んでいます。どんな考えでも大歓迎です。

86 css  ruby-on-rails  asset-pipeline  sass 

これはコンパス101かもしれませんが、色のアルファ値を設定するミックスインを書いた人はいますか？理想的には、ミックスインに任意の形式の色定義を適用し、透明度を適用したいと思います。 @include set-alpha( red, 0.5 ); //prints rgba(255, 0, 0, 0.5); @include set-alpha( #ff0000, 0.5 ); //prints rgba(255, 0, 0, 0.5); @include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);

86 css  sass  compass-sass  rgba 

itemクラスとコンパクトな「修飾子」クラスがあります。 .item { ... } .item.compact { /* styles to make .item smaller */ } これで結構です。ただし、画面が十分に小さい場合にクラスを@media強制的.itemにコンパクトにするクエリを追加したいと思います。 最初に考えたとき、これは私がやろうとしたことです： .item { ... } .item.compact { ... } @media (max-width: 600px) { .item { @extend .item.compact; } } ただし、これにより次のエラーが発生します。 @media内から外部セレクターを@extendすることはできません。同じディレクティブ内でのみ@extendセレクターを使用できます。 スタイルをコピー/貼り付けすることなく、SASSを使用してこれをどのように達成しますか？

86 css  sass  media-queries 

VS <= 2015では、less / sassファイルのコンパイルを処理するWebEssentials拡張機能を使用できますが、現在はVS2017をサポートしていません。ビルド時にless / sassをコンパイルできる同様の拡張機能をご存知ですか？

85 visual-studio  sass  less  visual-studio-2017  css-preprocessor 

node_modulesフォルダーにfont-awesomeがあるので、次のようにメインの.scssファイルにインポートしようとします。 @import "../../node_modules/font-awesome/scss/font-awesome.scss"; しかし、Webpackバンドルのコンパイルが失敗し、教えてくれました Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot font-awesome.scssファイルが相対パス '../fonts/'を参照しているためです。 scss \ webpackに別のファイルを@importし、そのファイルのフォルダーをホームフォルダーとして使用して、相対パスが期待どおりに機能するようにするにはどうすればよいですか？

84 node.js  sass  npm  font-awesome  webpack 

Twitterのブートストラップコードには!default、末尾にが付いた多くのCSSプロパティがあります。 例えば p { color: white !default; } 何をし!defaultますか？ 更新 はっきりしないのは悪い。BootstrapのSASS部分を使用しています。

82 css  twitter-bootstrap  sass 

フレームワークVuetifyJS（v2.0.19）でVueJSを使用しています。npm run serveを実行した後、このエラーが発生します： Sass Loaderは、APIスキーマと一致しないオプションオブジェクトを使用して初期化されました。 私が試したこと：node_modulesフォルダーを削除し、すべてのnpmパッケージとnode.jsを最新の安定したバージョンに再インストール/更新しました。 完全なエラーメッセージ： error in ./node_modules/vuetify/src/components/VRangeSlider/VRangeSlider.sass Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema. - options has an unknown property 'indentedSyntax'. These properties are valid: object { implementation?, sassOptions?, …

17 node.js  vue.js  npm  sass  node-modules 

私のプロジェクトでは、SASSとブレードの両方でいくつかのリソース（主にイメージ）を使用しています。また、SASSでのみ使用されるリソースと、Bladeでのみ使用されるリソースがあります。 たとえばmix('images/logo.png')、Bladeファイルやbackground: url('../images/logo.png')SASSファイルで使用できます。 私のディレクトリ構造に関しては、私は次のことをしました： - resources - js - sass - images // All images used by Blade, Sass, or both - fonts リソースをコンパイルしてpublicフォルダーに配置するには、以下を使用しますwebpack.mix.js。 mix.copy('resources/images/**/*.*', 'public/images'); mix.copy('resources/fonts/**/*.*', 'public/fonts'); mix.version('public/images/**/*.*'); mix.version('public/fonts/**/*.*'); mix.js('resources/js/app.js', 'public/js') .js('resources/js/vendor.js', 'public/js') .scripts([ // Old not ES6 JS 'resources/js/tpl/core.min.js' ], 'public/js/core.min.js') .sass('resources/sass/app.scss', 'public/css') .sourceMaps() .version(); その結果、app.cssでそのURLを取得します。 background: url(/images/logo.png?0e567ce87146d0353fe7f19f17b18aca); …

8 laravel  sass  frontend  laravel-blade  mix 

Angularアプリケーション内では、プレーンD3またはVegaのいずれかを介してD3ビジュアルを実行します。SCSSスタイリングも進行中です。 JavaScriptとSCSSからのスタイル設定で同じグローバル変数を参照できるようにしたいと思います。JSONファイルは、単純なimportステートメントを通じてTypescriptにロードする設定を保存するのに非常に役立ちます。しかし、SCSSから同じようにするにはどうすればよいですか？ node-sass-json-importer 良い候補のようですが、Angular 9 CLIアプリケーションに追加することは私には明らかではありません。 このStackOverflowの投稿はしばらく前にトピックについてブラッシュアップしましたが、node_modules持続可能性がほとんどないリソースの変更が含まれていました。 元のドキュメントには、Angular以外のアプリでWebpackをいかに調整するかについてのいくつかの入力もあります。これをCLI経由で構築されたAngularアプリに関連付ける方法がわかりません。 Webpack / sass-loader Blockquote Webpack v1 import jsonImporter from 'node-sass-json-importer'; // Webpack config export default { module: { loaders: [{ test: /\.scss$/, loaders: ["style", "css", "sass"] }], }, // Apply the JSON importer via sass-loader's options. sassLoader: { importer: jsonImporter() } }; …

8 json  angular  sass  angular9  node-sass-json-importer