4

我正在尝试引导一个新的 react 应用程序并使用 react-toolbox 库和 webpack。我无法同时加载 react-toolbox 的样式和我自己的应用程序的样式。

我习惯导入 scss 文件的方式是从它们附带的 react 文件/视图/组件中导入，因此它们位于同一个文件夹中。因此，如果我有一个名为 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')),
        },

但是当我包含 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-toolbox 样式未加载的问题，但是当我尝试在 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 的包含组件正在导入 some-react-class.js将其作为对象而不是函数导入，这使得它看起来像是在导入 scss 而不是 js。

帮助 ：（

4

2 回答 2

8

尝试像这样省略“包含”属性：

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

这个加载器应该包括你的 *.scss 和那些来自 react-toolbox 的。

于 2016-02-07T15:56:41.447 回答
3

看起来很老套-但我这样做是为了让它工作：

{
            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 变量。不知道这个问题是否与这种骇人听闻有关……好头疼

于 2016-06-25T01:51:20.013 回答