Question

我正在构建一个全球风格的程序包，供专有的react项目使用。该软件包包含令人敬畏的字体和基础知识。我已经能够成功地使另一个项目使用includePaths来使用sass-loader的样式包，但是在这个项目中，webpack努力将样式包中的引用解析为令人敬畏的字体和基础。我对sass-loader配置和可能的webpack属性进行了深入研究，这可能对这里有所帮助，并且似乎对该错误没有任何影响。这里可能出现的问题是我将样式包导入到故事书中。

//.storybook/webpack.config.js

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
            'style-loader', 
            'css-loader', 
            {
                loader:'sass-loader',
                options: {
                    sassOptions: {
                        includePaths: ['../node_modules']
                    }
                }

            }
        ],
        include: path.resolve(__dirname, '../'),
      },
    ],
  },
};

//.storybook/config.js

import { configure } from '@storybook/react';
//IMPORT OF CUSTOM STYLES PACKAGE, breaks without node_modules prefix
import '../node_modules/@my-org/global-styles/sass/global-styles.scss';

const req = require.context('../src/components', true, /.*.stories.js$/);

function loadStories() {
    req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);

错误：

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import 'foundation-sites/scss/util/util';
^
      File to import not found or unreadable: foundation-sites/scss/util/util.

可能与包含样式包的条目有关，其中实际错误是：

//@my-org/global-styles/sass/global-styles.scss

@import 'foundation-sites/scss/util/util';
@import '@fortawesome/fontawesome-pro/scss/variables';

无法解决自定义样式包中的节点模块依赖性

0 个答案: