web-dev-qa-db-ja.com

削除されたcreate-react-app構成にSass（.scss）を追加する

Create-react-appを使用して作成したアプリに.scssサポートを追加したい。

私はnpm run ejectをイジェクトし、必要な依存関係をインストールしました：npm install sass-loader node-sass --save-dev

内部config/webpack.config.dev.jsローダーに次のスニペットを追加しました：

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

したがって、ローダーの配列の先頭は次のようになります。

loaders: [
      // Process JS with Babel.
      {
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        loader: 'babel',
        query: require('./babel.dev')
      },
      // "postcss" loader applies autoprefixer to our CSS.
      // "css" loader resolves paths in CSS and adds assets as dependencies.
      // "style" loader turns CSS into JS modules that inject <style> tags.
      // In production, we use a plugin to extract that CSS to a file, but
      // in development "style" loader enables hot editing of CSS.
      {
        test: /\.css$/,
        loader: 'style!css!postcss'
      },
      // LOAD & COMPILE SCSS
      {
        test: /\.scss$/,
        include: paths.appSrc,
        loaders: ["style", "css", "scss"]
      },

私のjsxで、scssファイルをインポートしようとすると：

import './assets/app.scss';

エラーが発生します：

キャッチされないエラー：モジュール "./assets/app.scss"が見つかりません

.scssファイルを読み込めないため、設定が間違っている必要があります。排出された.scssにcreate-react-appファイルをロードするように設定を調整する方法

reactjssasswebpackcreate-react-app
11
bukowski

OK、私は解決策を見つけました-これから変更：

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

これに：

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

そして今私の.scssファイルを読み込んでいます!!

8
bukowski

Sassを空のreactプロジェクトに統合しようとしたとき、これを使用しました article 。そこで提示された解決策は機能せず、件名と同様のエラーを受け取りました。私の場合、_style-loader_をrequire.resolve('style-loader')で置き換えると役に立ちました：

_ {
        test: /\.scss$/,
        include: paths.appSrc,
        loaders: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('sass-loader')]
  },
_
9
Greg Woz

最初のローダーを確認します。最初にすべてのファイルを取得し、他のローダーファイルを除外します

loaders: [
        {
            exclude: [
                /\.html$/,
                /\.(js|jsx)$/,
                /\.css$/,
                /\.json$/,
                /\.svg$/
            ],
            loader: 'url',
            query: {
                limit: 10000,
                name: 'static/media/[name].[hash:8].[ext]'
            }
        },

だから追加

/\.sass$/,
/\.scss$/,

除外するには、私が持っていた同じ問題を修正したようです：D

9
Ayaz Hussein

あなたはおそらく使用する必要があります

include: paths.appSrc,

webpackホットリロードを有効にするオプション。したがって、設定スニペットは次のようになります

{
    test: /\.scss$/,
    include: paths.appSrc,
    loaders: ['style', 'css', 'sass']
},
1
Achmedzianov Danilian

このローダーの設定で最新バージョンを確認してください。

{
     test: /\.scss$/,
     use: [
         "style-loader", // creates style nodes from JS strings
         "css-loader", // translates CSS into CommonJS
         "sass-loader" // compiles Sass to CSS
    ]
}
0
Andrew Bazilskiy

最新の構成に従って[CRA]

:: webpack.config.dev.js ::

{
    test: /\.css$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebookincubator/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
          ],
        },
      },
    ],
  },
  {
    test: /\.scss$/,
    loaders: [
        require.resolve("style-loader"), // creates style nodes from JS strings
        require.resolve("css-loader"), // transl ates CSS into CommonJS
        require.resolve("sass-loader") // compiles Sass to CSS
      ]
  },
0
Venkat Ch