javascript - 将 gatsby 元素从 css 转换为 scss，遇到丢失网格预处理的问题

Question

我正在使用 Lost grid 的 gatsby 入门元素并从 css 转换为 scss 以获得一些 yield 。这是入门元素:https://github.com/wpioneer/gatsby-starter-lumen

本质上，我正在将元素转换为 scss，因为我更喜欢它的结构，并且希望摆脱所有 css 文件。现在，我只是:

• 已安装 sass-loader、scss 和 node-sass
• 将所有 css 文件重命名为 scss 文件

• 并将 gatsby-node.js 修改为以下内容:

  var rucksack = require('rucksack-css')
  var lost = require("lost")
  var cssnext = require("postcss-cssnext")
  
  exports.modifyWebpackConfig = function(config, env) {
      config.merge({
          postcss: [
              lost(),
              rucksack(),
              cssnext({
                  browsers: ['>1%', 'last 2 versions']
              })
          ]
      })
  
      config.loader('svg', {
         test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         loader: 'file-loader',
      })
  
      config.loader('sass', {
          test: /\.scss$/,
          loader: 'style-loader!css-loader!sass-loader',
      })
  
      return config
  };
  

不幸的是，虽然这确实允许我使用 scss 构建和运行该元素，但我注意到我甜蜜的 Lost 网格已经消失了。经过调查，我注意到 .sidebar 在浏览器中仍然读取为 lost-column: 1/3 (例如)，因此我可以看到对于丢失网格至关重要的预处理没有发生。

老实说，这可能是 Lost grid 之外的问题，而是我如何构建 gatsby-node.js 的问题，但如果您能深入了解我所缺少的内容，我将不胜感激。一旦此问题得到解决，我不介意上传 scss/lost 的 gatsby 入门元素。

Answer 1

已解决。

在node_modules/gatsby/dist/utils/webpack.config.js中，我更改了

    // CSS modules
    config.loader('cssModules', {
      test: /\.module\.css$/,
      loaders: ['style', cssModulesConfDev, 'postcss']
    });
    config.loader('lessModules', {
      test: /\.module\.less/,
      loaders: ['style', cssModulesConfDev, 'less']
    });
    config.loader('sassModules', {
      test: /\.module\.(sass|scss)/,
      loaders: ['style', cssModulesConfDev, 'sass']
    });

至:

    // CSS modules
    config.loader('lessModules', {
      test: /\.module\.less/,
      loaders: ['style', cssModulesConfDev, 'less']
    });
    config.loader('sassModules', {
      test: /\.module\.(sass|scss)/,
      loaders: ['style', cssModulesConfDev, 'sass']
    });
    config.loader('cssModules', {
      test: /\.module\.css$/,
      loaders: ['style', cssModulesConfDev, 'postcss']
    });

我可能会看看 Gatsby 人们如何看待让这一改变永久化。