web-dev-qa-db-ja.com

sassがスタイルをロードしないcreate-react-app

create-react-app にsass/scssサポートを追加しようとしています。

だから私はこれらの手順を行いました：

  1. npm eject
  2. npm install sass-loader node-sass --save-dev

  3. Webpack.config.dev.jsファイルを選択し、これをローダーセクションに追加しました。

    {
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
},

私のapp.jsファイルでは、scssファイルを参照しています：import './css/app.scss';

npm startを実行すると、すべてがエラーなしでコンパイルされますが、アプリケーションはスタイルなしでロードされます。

何が欠けていますか？

reactjswebpackcreate-react-app
9
Tomer

私はこれを経験しました、そして多くの人々が失われたか、正しい答えを見つけられないようです。これは私がやったことです：

構成を制御する

npm run eject

このコマンドを実行すると、すべての構成ファイルと推移的な依存関係（Webpack、Babel、ESLintなど）がプロジェクトに直接コピーされます。このパッケージを直接変更しないでください！

Sassコンパイラーとwebpackローダーをインストールする

npm install sass-loader node-sass --save-dev

この時点で、開発依存関係としてsassコンパイラーとwebpackローダーをインストールする必要があります。

Webpack構成を変更する

  1. 開いた config\webpack.config.dev.js。

  2. 追加 /\.scss$/,をURLローダーの除外配列に追加すると、更新後は次のようになります。

    exclude: [
    /\.html$/,
    /\.(js|jsx)$/,
    /\.css$/,
    /\.json$/,
    /\.svg$/,
    /\.scss$/, //Add this line
],

  3. SASS/SCSSローダーを追加します。

    {
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
},
13
Tom Sarduy

ドキュメント を読んで同じ問題に悩まされました。

Unitl create-react-appで作成されたプロジェクト内のREADME.mdファイルが別の方法で文書化し、機能していることを発見しました。そのreadmeファイル（作成したプロジェクトに同梱されている）に依存することをお勧めします。

2
bluemmb

ステップ1：

npm run eject

これで、設定ファイルがプロジェクトフォルダに表示されます

ステップ2： sassコンパイラとwebpackローダーをインストールします

npm install sass-loader node-sass --save-dev

config\webpack.config.dev.jsに/。scss $ /をexclude配列に追加します

ステップ3：以下のローダーをrules配列に追加（ファイルローダーの前に追加する必要があります）

  {
            test: /\.scss$/,
            loaders: [
              require.resolve('style-loader'),
              require.resolve('css-loader'),
              require.resolve('sass-loader')
            ]
  }

そして、アプリケーションを起動します。

既存のcssファイルの名前をscssに変更して作業することができます

1
anud33p

イジェクトなしのSassを使用したスタイリング

1）Koalaをインストールする

Koala は、sass、lessなどのコンパイラです。これには、任意のツールを使用できます。

2）srcフォルダーを追加します

すべてのSCSSファイルを含むソースフォルダーをコアラに追加します。 Sassファイルへの変更を監視し、コンパイルされたCSSバージョンを即座に生成します。

3）CSSファイルを参照する

コアラが生成したCSSファイルをプロジェクトに直接使用します。

import './style.css';
0
Cijo
{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass','scss']   //add 'scss'
},
0
jie ren