Question

我正在使用一个使用Lost grid的gatsby启动项目，并从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构建和运行项目，但我注意到我的甜蜜迷失网格已经消失了。经过调查，我注意到.sidebar仍然在浏览器中显示为lost-column: 1/3（例如），因此我可以看到对丢失网格至关重要的预处理没有发生。

老实说，这可能是Lost网格之外的一个问题，而不是我如何构建gatsby-node.js的问题，但我很欣赏任何我缺少的内容。在解决此问题后，我不介意为gatsby 上传 scss / lost启动项目。

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项目从css转换为scss，遇到丢失的网格预处理问题

1 个答案: