Question

在scss文件中，我试图导入自定义的，广泛使用的scss块（在React / SASS / Webpack堆栈中）。

这样我就可以使用共享的mixin。

让我们说我正在创建一个MyAdminButton，我想导入涉及项目所有按钮的scss文件。（它的自定义scss，而非供应商/外部scss。）

看起来像这样：

//this actually works but it is a code smell : what if the current file moves ?
@import "../../stylesheets/_common-btn-styles.scss";

.my-admin-btn {
    // here I can use a shared mixin defined in _common-btn-styles.scss
}

这听起来不太好，因为如果我的scss文件移动，那么一切都会被破坏。

感谢您的帮助

Answer 1

实测值。实际上你可以在webpack.config.json中配置sass-loader，如下所述：https://github.com/jtangelder/sass-loader

以下是相关部分：

sassLoader: {
   includePaths: [path.resolve(__dirname, "./some-folder")]
}

Answer 2

在 react-scripts 最新版本中，您可以在项目根目录中添加一个 .env 文件，其中包含变量 SASS_PATH=node_modules:src。

要指定更多目录，您可以将它们添加到由 : 分隔的 SASS_PATH 中，例如 path1:path2:path3

official doc

Answer 3

您可以使用resolve.modules

将样式表添加到Webpack模块中

// webpack.config.js
const path = require('path')

module.exports = {
  // ...
  resolve: {
    modules: [
      'node_modules',
      path.join(__dirname, 'path/to/stylesheets'),
    ],
  },
}

并且sass-loader可让您从模块中导入 _common-btn-styles.scss 。 https://webpack.js.org/loaders/sass-loader/#resolving-import-at-rules

@import "~_common-btn-styles.scss";

.my-admin-btn {
  // Use the shared mixins
}

Answer 4

我必须做更多的研究才能使用其他答案来解决此问题，所以这是我的可行解决方案：

// Webpack config
{
  test: /\.scss$/,
  loader: 'sass-loader',
  options: {
    includePaths: [path.resolve(__dirname, '<path to styles>')],
  },
},

然后在您的scss文件中：

@import 'filename.scss'; // Imported from <path to styles> folder.

.style {
  //...
}

Answer 5

如果您使用allows absolute imports的Create React App v3，则可以使用波浪号

@import "~theme/colors";

使用react + webpack时如何使用绝对路径导入自定义scss？

5 个答案: