将gatsby项目从css转换为scss，遇到丢失的grid预处理问题

我正在参加gatsby starter项目，该项目使用Lost grid并将css转换为scss以获得一些收益。这是启动项目：https://github.com/wpioneer/gatsby-starter-lumen 将gatsby项目从css转换为scss，遇到丢失的grid预处理问题

本质上，我将项目转换为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，所以我可以看到对于丢失网格至关重要的预处理没有发生。

说实话，这可能是丢失网格之外的问题，而是我如何构建gatsby-node.js的问题，但是我希望能够深入了解我所缺少的内容。一旦解决此问题，我不介意上传scss /丢失的启动器项目，用于gatsby。

来源

2017-01-23 atschaal

这将需要postcss-loader＆postcss-lost才能正常工作。 – RyanZim

为什么要添加sass-loader配置？盖茨比已经包括默认情况下？ https://github.com/gatsbyjs/gatsby/blob/45c1fd346349e98a88728710880cd2a3813e787e/lib/utils/webpack.config.js#L310 –

@KyleMathews，猜这是一个错误。然而，我不认为这应该导致丢失的网格不预处理... – atschaal

已解决。

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

我可能会看到盖茨比人们看到有关使这种更改永久有效。

来源

2017-01-24 08:08:37 atschaal

将gatsby项目从css转换为scss，遇到丢失的grid预处理问题

回答

相关问题