11

.scsscreate-react-app を使用して作成したアプリにサポートを追加したいと考えています。

必要な依存関係を取り出し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 配列の先頭は次のようになります。

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"]
      },

scssファイルをインポートしようとすると、jsxで次のようになります。

import './assets/app.scss';

エラーが発生します：

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

.scssファイルをロードできないため、構成が間違っているに違いありません。.scss排出されたファイルをロードするように構成を調整するにはどうすればよいcreate-react-appですか?

4

6 に答える 6

9

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

 {
        test: /\.scss$/,
        include: paths.appSrc,
        loaders: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('sass-loader')]
  },
于 2017-07-05T13:09:41.027 に答える
1

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

include: paths.appSrc,

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

{
    test: /\.scss$/,
    include: paths.appSrc,
    loaders: ['style', 'css', 'sass']
},
于 2016-11-22T20:54:20.910 に答える