主页 / 问题 / 1186494
Accepted
HaZcker
Asked:2020-10-06 01:53:50 +0000 UTC2020-10-06 01:53:50 +0000 UTC

通过 create-react-app 创建项目时的 webpack 别名

  • 772

我通过create-react-app
如何添加别名创建了一个应用程序，例如，在sass而不是

@import "../../../../variables"

写

@import "@variables"

并且通过同样的原理来导入组件

reactjs

1 个回答

  1. Best Answer

    JS

    对于 JS 中的别名，我认为您需要此文档和此问题

    JS 配置示例

    const path = require('path');
module.exports = {
    ...
    resolve: {
        extensions: ['.js', '.jsx'],
        alias: {
            '@variables': path.resolve('путь.до/папки1'),
        }
    }
    ...
}

    允许您执行此导入

    import '@variables/style.scss';

    假设文件style.scss在里面путь.до/папки1

    SASS

    同样SASS，您可以使用选项sass-loader

    更多关于这里和这里

    您的 SASS 配置示例

    const path = require('path');
module.exports = {
    ...
            {
                test: /\.scss$/,
                loader: 'sass-loader',
                options: {
                    includePaths: ['путь/до/папки2']
                        .map((d) => path.join(__dirname, d))
                        .map((g) => glob.sync(g))
                        .reduce((a, c) => a.concat(c), [])
                }
            }
    ...
}

    将使您能够在.scss文件中进行此类导入

    @import '@variables/style';

    假设文件style.scss在里面путь/до/папки2/@variables

    请注意，JS您可以简单地创建别名并指定路径，而文件夹可以以不同方式调用

    但是，SASS您将需要准确的文件夹名称@variables，并且您只需指定加载程序的自定义路径

    更改配置

    感谢格兰迪的评论。

    默认情况下create-react-app，它对我们隐藏配置，因此我们不会触摸它，但至少有两种方法可以更改它：

    1. 使用npm run eject，但这是不好的做法，只能作为最后的手段使用。在这里阅读更多

    2. 使用react-app-rewired，它允许您在基本配置之上制作附加组件eject，而无需使用. 在此处和此视频中阅读更多信息。

    使用时别忘了module.exports = {换成module.exports = function override(config, env) {react-app-rewired

    • 3

相关问题