問題タブ [sass-loader]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
2346 参照

angularjs - sass-loader の無効な CSS エラー

私のapp.scss

実行時の出力エラー./node_modules/.bin/webpack

じぶんのwebpack.config

と私app.js

0 投票する
1 に答える
2027 参照

javascript - ソースマップと URL ステートメントを含む Webpack sass ローダー

url('')ソース マップを作成するには、ステートメントで絶対 URL を使用する必要があることを読みました。私はこのようにしました:

cssローダーからsourceMapオプションを削除すると機能しますが、アクティブにすると機能しません。

絶対パスポイントのどこかで失敗したのではないかと思います。何かアイデアはありますか?

ここに私の設定ファイルがあります:

より一般的な考えでは、私がやろうとしていることの実例を見つけることができませんでした。あなたが私をそこにリダイレクトできるなら、私は非常に興味があります.

0 投票する
3 に答える
31469 参照

javascript - Webpack - sass ローダーが画像を見つけられない

sass loaderドキュメントは次のように述べています"If you're just generating CSS without passing it to the css-loader, it must be relative to your web root"。だから私はそれが言うように、私は私のindex.html中に私のものを持っていて、それから私は私のファイルからproject rootロードしようとしています。今、私は 2 つのエラーがあります: 1) from : 。2) 私から:imagescssChrome's consoleCannot find module "./img/header.jpg"terminal

webpack.config.js

コードを見ると、css が内部にあることがはっきりとわかる<head>ので、ドキュメントにあるようにイメージのパスをルートに向けましたが、それでも修正できません。

更新: インストールfile-loaderして指示に従いましたが、コンソールに次のエラーが表示されます:GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119

0 投票する
0 に答える
241 参照

performance - Webpack ホット モジュール置換を使用して Sass コンパイルを最適化する

Webpack でホット モジュール置換を使用する場合、Sass ファイルのコンパイル パフォーマンスに影響を与える要因は何ですか?

現在、複数のディレクトリに整理された多くのSassファイルがあります。

各ディレクトリには、内部のファイルをロードするマニフェストがあり、すべてのマニフェストとすべてのベンダー ライブラリをロードするエントリ ポイントはmain.scss.

現在、アプリケーション エントリポイント ( app.js)からこのファイルが必要です。

HMR は現在動作していますが、変更されたファイルを保存してからブラウザで変更が更新されるまでには長い遅延があります。

私のサスローダー:

開発ツール構成:

HMR の更新速度に影響を与える要因は何ですか?

0 投票する
4 に答える
38775 参照

sass - webpack (sass-loader を使用) - scss ファイルの @import が解決エイリアスを認識しない

私のプロジェクト構造:

webpack.config module.exports で:

私のファイル - myComponent.scss:

bundle.js のビルド時に次のエラーが発生します。

sass ファイルでエイリアスを @import するにはどうすればよいですか?

0 投票する
3 に答える
12078 参照

javascript - Vue.js + Webpack + vue-loader + ブートストラップ-sass + sass-loader

Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader を使い始めたばかりで、少し迷っています。

私がやりたいのは、SPA Vue.js コードで SASS バージョンのブートストラップを使用することです。SASSを使用してブートストラップのカスタマイズを実行できるように、これを実行したいと考えています。これが私がやったことです:

  • vue-cli で新しい Vue.js + webpack プロジェクトを作成しました。
  • bootstrap-sass と sass-loader をインストールしました。
  • build/webpack.base.conf.js に以下を追加しました。

    /li>
  • 次の 1 行で src/style.scss を作成しました。@import 'bootstrap';

  • src/main.js の先頭に次の行を追加しました。import './style.scss'

今実行するnpm run devと、次のエラーが表示されます。

なぜこれが機能しないのかわかりません。

また、この質問に関連して、Vue コンポーネント内の Bootstrap SASS 変数にアクセスするにはどうすればよいですか? ここで何が起こっているのか理解できれば、SASS は CSS にコンパイルされてから main.js にインラインで組み込まれます。つまり、コンポーネント内の Bootstrap 変数にアクセスできなくなります。これを達成する方法はありますか?

0 投票する
3 に答える
4100 参照

sass - Webpack と sass ローダーを使用して NODE_ENV パラメータを sass ファイルに挿入することは可能ですか?

私は NODE_ENV を sass ファイルに挿入しようとしているので、dev/prod env に対して異なる出力を持つことができ、その中にそのような条件を持つ sass 関数を持つことができます: @if (NODE_ENV == 'prod') {}

私のwebpack.configは次のようになります:

ローダーにデータ パラメータを渡そうとしましたが、うまくいきませんでした。どんな助けにも感謝します!