Webpack沒有使用react-toolbox加載SCSS

Question

我正在嘗試引導一個新的反應應用程序並使用react-toolbox庫和webpack。 我無法同時獲得react-toolbox的樣式和我自己的應用程序樣式。

我習慣導入scss文件的方式來自它們使用的react文件/視圖/組件，因此它們位於同一個文件夾中。 因此，如果我有一個名為header.js的react組件文件，則在同一目錄中有header.scss。 Header.js調用import './header.scss' 。 在webpack中，我以前用來加載scss的是：

        {
            test: /\.s?css$/i,
            loader: 'style!css!sass?' +
                'includePaths[]=' + (path.resolve(__dirname, './node_modules')),
        },

但是當我包含react-toolbox時，這個設置完全排除了react-toolbox的樣式。 我發現這個問題https://github.com/react-toolbox/react-toolbox/issues/121其中mattgi推薦這個webpack-config：

        {
           test    : /(\.scss|\.css)$/,
           include : path.join(__dirname, '../../', 'src'),
           loaders : [ 'style', 'css', 'sass' ]
         },
         {
           test    : /(\.scss|\.css)$/,
           include : /(node_modules)\/react-toolbox/,
           loaders : [
             require.resolve('style-loader'),
             require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
             require.resolve('sass-loader') + '?sourceMap',
           ]
         },

這解決了反應工具箱樣式沒有加載，但是當我嘗試在js文件中導入我自己的 scss文件時，webpack會為scss文件拋出此錯誤： You may need an appropriate loader to handle this file type. （我安裝了sass-loader）。

另外，如果我將scss文件包含在同一目錄中的同名（some-react-class.js和some-react-class.scss），那么導入some-react-class.js的SomeReactClass的包含組件將它作為一個對象而不是一個函數導入，使它看起來像是導入scss而不是js。

救命 ：（

Answer 1

嘗試省略“include”屬性，如下所示：

{
  test: /(\.css|\.scss)$/,
  loader: 'style!css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass?sourceMap'
}

這個加載器應該包含你的* .scss和來自react-toolbox的那些。

Answer 2

似乎hacky - 但我這樣做是為了讓它工作：

{
            test: /\.s?css$/,
            loaders: ['style', 'css', 'sass'],
             exclude: /(node_modules)\/react-toolbox/
          },
          {
            test    : /(\.scss|\.css)$/,
            include : /(node_modules)\/react-toolbox/,
            loaders : [
              require.resolve('style-loader'),
              require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
              require.resolve('sass-loader') + '?sourceMap'
            ]
          },

Bootstrap樣式和react-toolbox樣式有效 - 但是我有一段時間添加一個文件來通過toolbox-loader覆蓋默認的sass變量。 不確定這個問題是否與這種黑客有關......很頭疼