Question

自昨天以来，我面临着一个可怕的问题。我只是从react开始，想添加scss支持并将其在组件中用作这样的模块

import styles from './App.scss'

我安装了所需的所有开发依赖项

npm i node-sass sass-loader --save-dev

我还配置了webpack（注意：-我正在使用create-react-app，因此必须将其弹出），这是我的css和scss配置

{
            test: /\.scss$/,
            include: paths.appSrc,
            use: [
              {
                loader: require.resolve('style-loader'),
              },
              {
                loader: require.resolve('css-loader')
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9',
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
              {
                loader: require.resolve('sass-loader'),
                options: {
                  modules: true,
                  importLoaders: 1,
                  localIdentName: '[name]__[local]__[hash:base64:5]',
                  includePaths: ['./node_modules'],
                }
              },
            ]
          },
          {
            test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  modules: true,
                  importLoaders: 1,
                  localIdentName: '[name]__[local]__[hash:base64:5]',
                  includePaths: ['./node_modules']
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', 
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          },

现在使用此功能，我可以将scss作为模块加载到组件中，但是这里的主要问题是我无法导入node_modules内部的外部scss文件，

options: {
   modules: true,
   importLoaders: 1,
   localIdentName: '[name]__[local]__[hash:base64:5]',
   includePaths: ['./node_modules']
 },

但是当我在webpack config中的scss部分的css-loader中加载以上选项时，我能够导入外部scs，但不能将我的项目scss用作模块。我知道这是一个奇怪的问题，我尽力解释得尽可能简单。请在错误的地方帮我。.配置摘要对我很有帮助。

无法在Webpack 3.8 React中导入外部SCSS

0 个答案: