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

这解决了react-toolsbox样式没有加载的问题，但是当我尝试在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-的SomeReactClass的包含组件 - class.js将它作为一个对象而不是一个函数导入，这使得它看起来像是导入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变量。不确定这个问题是否与这种黑客有关......呃头痛

Webpack没有使用react-toolbox加载SCSS

2 个答案: