Konvertieren gatsby Projekt von CSS zu scss, mit Problemen mit verlorenen Grid-Vorverarbeitung

Question

Ich nehme ein Gatsby-Starter-Projekt, das Lost grid und die Konvertierung von CSS zu SCS für einige Gewinne verwendet. Dies ist das Starter-Projekt: https://github.com/wpioneer/gatsby-starter-lumen

Im Wesentlichen konvertiere ich das Projekt zu scss, weil ich viel lieber seine Struktur und möchte weg von allen CSS-Dateien. Denn jetzt habe ich einfach:

• sass-loader installiert, scss und node-sass
• Umbenannt alle CSS-Dateien Dateien SCSS

• und modifizierte gatsby-node.js auf die folgenden:

  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 
  }; 
  

Leider, während dies erlaubt mir, das Projekt mit scss zu bauen und zu führen, I'v Es ist mir aufgefallen, dass mein süßes verlorenes Gitter verschwunden ist. Nach der Untersuchung merke ich, dass .sidebar im Browser immer noch als lost-column: 1/3 liest (zum Beispiel), so kann ich sehen, dass die Vorverarbeitung, die für Lost Grid entscheidend ist, nicht passiert ist.

Ehrlich gesagt, ist dies wahrscheinlich ein Problem außerhalb von Lost Grid, und eher ein Problem mit, wie ich die gatsby-node.js konstruiert habe, aber ich würde jede Einsicht in das, was ich vermisse, schätzen. Ich habe nichts dagegen, ein scss/verloren Starter-Projekt für gatsby hochladen, sobald dieses Problem gelöst ist.

Answer 1

Gelöst.

In node_modules/gatsby/dist/utils/webpack.config.js, änderte ich

// 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'] 
    }); 

zu:

// 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'] 
    }); 

Ich werde wahrscheinlich sehen, was die gatsby Leute sehen diese Änderung dauerhaft zu machen.