Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/454.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Web包未使用react工具箱加载SCS_Javascript_Reactjs_Webpack_React Toolbox - Fatal编程技术网

Javascript Web包未使用react工具箱加载SCS

Javascript Web包未使用react工具箱加载SCS,javascript,reactjs,webpack,react-toolbox,Javascript,Reactjs,Webpack,React Toolbox,我正在尝试引导一个新的react应用程序,并使用react工具箱库和网页包。我无法同时加载react toolbox的样式和我自己的应用程序的样式 我习惯于导入scss文件的方式是从它们附带的react文件/视图/组件,因此它们位于同一文件夹中。因此,如果我有一个名为header.js的react组件文件,在同一个目录中有header.scss。Header.js调用import./Header.scss'。在webpack中,我以前用于加载SCS的是: {

我正在尝试引导一个新的react应用程序,并使用react工具箱库和网页包。我无法同时加载react toolbox的样式和我自己的应用程序的样式

我习惯于导入scss文件的方式是从它们附带的react文件/视图/组件,因此它们位于同一文件夹中。因此,如果我有一个名为header.js的react组件文件,在同一个目录中有header.scss。Header.js调用
import./Header.scss'
。在webpack中,我以前用于加载SCS的是:

        {
            test: /\.s?css$/i,
            loader: 'style!css!sass?' +
                'includePaths[]=' + (path.resolve(__dirname, './node_modules')),
        },
但当我包括react toolbox时,此设置完全排除react toolbox的样式。我发现mattgi推荐此网页配置的问题:

        {
           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文件抛出此错误:
您可能需要适当的加载程序来处理此文件类型。
(我已安装sass加载程序)

此外,如果我将scss文件包含在同一目录中,并使用相同的名称(some-react-class.js和some-react-class.scss),则导入some-react-class.js的SomeReactClass的包含组件将其作为对象而不是函数导入,这使它看起来像是导入scss而不是js

帮助:(

尝试省略“include”属性,如下所示:

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

此加载程序应包括您的*.scs和react工具箱中的加载程序。

似乎有问题-但我这样做是为了让它正常工作:

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

引导样式和react工具箱样式很有效-但是我在添加一个文件以通过工具箱加载程序覆盖默认的sass变量时遇到了麻烦。不确定这个问题是否与此黑客行为有关…呃,头痛

我也遇到了您在一些研究后描述的相同问题,我最终决定使用react组件它实现了材质UI。