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

回答

相关问题