Преобразование gatsby проекта из css в scss, с проблемами с прессованием потерянной сетки

Question

Я беру проект стартера gatsby, который использует Lost grid и конвертирует из css в scss для некоторой выгоды. Это стартовый проект: 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, I'v e заметил, что моя милая потерянная сетка исчезла. После расследования я заметил, что .sidebar по-прежнему читается как lost-column: 1/3 в браузере (например), поэтому я вижу, что препроцессинг, который имеет решающее значение для Lost grid, не произошел.

Честно говоря, это, вероятно, проблема за пределами сетки Lost, а скорее проблема с тем, как я построил gatsby-node.js, но я был бы признателен за любое понимание того, что мне не хватает. Я не против загрузки scss/lost starter project для 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'] 
    }); 

Я, вероятно, увидеть, что Гэтсби люди видеть о том, чтобы эти изменения постоянными.