在每个样式表配置中自动导入 sass 部分答案

【问题标题】：Auto-import sass partials in every stylesheet configutation在每个样式表配置中自动导入 sass 部分
【发布时间】：2021-02-19 02:30:41
【问题描述】：

最近我开始使用 CSS 模块使用 NextJS。为了消除重复，我想在每个样式表中使用 mixins、变量等自动导入部分。

使用 GatsbyJS 我发现了如何在我的项目的每个样式表中自动导入一些特定的 SASS 部分。设置如下所示：

{
  resolve: `gatsby-plugin-sass`,
  options: {
  data: '@import "_reset.scss", "_typography.scss", "_mixins.scss", "_extends.scss", "_themes.scss";',
  includePaths: [
    'src/styles/partials',
    ],
  },
},

现在我的 next.settings.js 看起来像这样：

const path = require("path");
const withSass = require("@zeit/next-sass");

const partials = [
  "_reset.scss",
  "_variables.scss",
  "_themes.scss",
  "_typography.scss",
  "_mixins.scss",
  "_extends.scss",
];

module.exports = withSass({

  cssModules: true,

  webpack: config => {
    config.resolve.alias["components"] = path.join(__dirname, "components");
    return config;
  },

});

如果可能，如何在每个样式表中自动排除部分？

问题的解决方法，感谢@eric-tan 回复：

所有部分都导入到一个“_utilty.scss”部分中，该部分包含在 sassLoaderOptions 中： -> 数据：导入部分本身； -> includePaths：导入部分的位置。

const path = require("path");
const withSass = require("@zeit/next-sass");

module.exports = withSass({

  cssModules: true,
  sassLoaderOptions: {
    data: '@import "_utility.scss";',
    includePaths: [
      path.resolve(__dirname, "styles/"),
    ]
  },

  webpack: config => {
    config.resolve.alias["components"] = path.join(__dirname, "components");
    return config;
  },

});

【问题讨论】：

标签： css webpack sass next.js css-modules

【解决方案1】：

我们可以像这样使用 sass 加载器：

  {
     // Loads a SASS/SCSS file and include the partial files before compilation
     loader: 'sass-loader',
       options: {
         data:
           '@import "foo-partial";\n ' +
           '@import "bar-partial";',
           includePaths: [
             path.resolve(__dirname, '../src/assets/styles')
           ]
        }
  }

nextSass 提供sass loader option，您可以尝试将它们组合到您的设置中。

【讨论】：

【解决方案2】：

在较新版本的 sass-loader 中，上述方法停止工作，因为不再支持 data 选项。而不是：

options: {
  data: `@import "${__dirname}/sass/variables";`,
}

用途：

options: {
  additionalData: `@import "${__dirname}/sass/variables";`,
}

【讨论】：