Webpack不加載SCSS與react-toolbox

我想引導一個新的反應應用程序，並使用react-toolbox庫和webpack。我無法同時加載react-toolbox的樣式和我自己的應用樣式。Webpack不加載SCSS與react-toolbox

我習慣於導入scss文件的方式來自於它們所反應的文件/視圖/組件，因此它們位於相同的文件夾中。所以如果我有一個叫做header.js的反應組件文件，那麼在同一個目錄下有header.scss。 Header.js呼叫import './header.scss'。在的WebPack，我以前用來加載SCSS是：

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

但當我反應包括工具箱，這種設置可完全排除反應，工具箱的風格。我發現這個問題https://github.com/react-toolbox/react-toolbox/issues/121其中mattgi建議此的WebPack-配置：

 { 
      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）的相同目錄中，那麼SomeReactClass的包含組件會導致某些反應-class.js將它作爲一個對象導入，而不是一個函數，這使得它看起來像導入scss而不是js。。

幫助:(

來源

2016-01-23 thisAnneM

我也有同樣的問題，你在一些研究後描述，我終於決定去與https://github.com/callemall/material-ui哪也是實現材質UI的React組件。 – Aaleks

儘量省略「包括」屬性是這樣的：

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

這個加載應該包括你的* .scss和從反應-工具箱

來源

2016-02-07 15:56:41

似乎哈克 - 但我這樣做是爲了得到它的工作：

{ 
      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' 
      ] 
      },

引導方式和反應，工具箱款式工夫 - 但我有一段時間添加一個文件來通過工具箱加載器覆蓋默認的sass變量。不知道這個問題是否與此hackiness有關...呃頭痛

來源

2016-06-25 01:51:20 matthewalexander

Webpack不加載SCSS與react-toolbox

回答

相關問題