問題タブ [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.
angularjs - sass-loader の無効な CSS エラー
私のapp.scss
実行時の出力エラー./node_modules/.bin/webpack
じぶんのwebpack.config
と私app.js
javascript - ソースマップと URL ステートメントを含む Webpack sass ローダー
url('')
ソース マップを作成するには、ステートメントで絶対 URL を使用する必要があることを読みました。私はこのようにしました:
cssローダーからsourceMapオプションを削除すると機能しますが、アクティブにすると機能しません。
絶対パスポイントのどこかで失敗したのではないかと思います。何かアイデアはありますか?
ここに私の設定ファイルがあります:
より一般的な考えでは、私がやろうとしていることの実例を見つけることができませんでした。あなたが私をそこにリダイレクトできるなら、私は非常に興味があります.
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) 私から:image
scss
Chrome's console
Cannot 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
performance - Webpack ホット モジュール置換を使用して Sass コンパイルを最適化する
Webpack でホット モジュール置換を使用する場合、Sass ファイルのコンパイル パフォーマンスに影響を与える要因は何ですか?
現在、複数のディレクトリに整理された多くのSassファイルがあります。
各ディレクトリには、内部のファイルをロードするマニフェストがあり、すべてのマニフェストとすべてのベンダー ライブラリをロードするエントリ ポイントはmain.scss
.
現在、アプリケーション エントリポイント ( app.js
)からこのファイルが必要です。
HMR は現在動作していますが、変更されたファイルを保存してからブラウザで変更が更新されるまでには長い遅延があります。
私のサスローダー:
開発ツール構成:
HMR の更新速度に影響を与える要因は何ですか?
sass - webpack (sass-loader を使用) - scss ファイルの @import が解決エイリアスを認識しない
私のプロジェクト構造:
webpack.config module.exports で:
私のファイル - myComponent.scss:
bundle.js のビルド時に次のエラーが発生します。
sass ファイルでエイリアスを @import するにはどうすればよいですか?
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 変数にアクセスできなくなります。これを達成する方法はありますか?
sass - Webpack と sass ローダーを使用して NODE_ENV パラメータを sass ファイルに挿入することは可能ですか?
私は NODE_ENV を sass ファイルに挿入しようとしているので、dev/prod env に対して異なる出力を持つことができ、その中にそのような条件を持つ sass 関数を持つことができます:
@if (NODE_ENV == 'prod') {}
私のwebpack.configは次のようになります:
ローダーにデータ パラメータを渡そうとしましたが、うまくいきませんでした。どんな助けにも感謝します!