我试图让SCSS SourceMaps在我们的项目中工作，但似乎没有任何工作让它们启用，我不确定我在这里缺少什么。说实话，我对webpack很新，之前只使用过Gulp，所以我真的不知道我的意思是启用它们。有人能看看我的gatsby-node.js并告诉我哪里出错了？
npm list gatsby）：1.9.183 gatsby-node.js：
```
const _ = require(`lodash`);
const Promise = require(`bluebird`);
const path = require(`path`);
const slash = require(`slash`);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const { cssModulesConfig } = require(`gatsby-1-config-css-modules`)
exports.createLayouts = ({graphql, boundActionCreators}) => {
const {createLayout} = boundActionCreators;
return new Promise((resolve, reject) => {
graphql(`
{
directusGlobal {
directusId
description
keywords
og_title
og_description
og_url
og_type
robots
geo_placename
geo_position
geo_region
icbm
og_image
og_site_name
fb_app_id
}
}
`).then(result => {
if (result.errors) {
console.log(result.errors);
reject(result.errors);
}
if (result.data !== undefined) {
createLayout({
component: path.resolve(`./src/templates/layouts/main-layout.js`),
context: result.data.directusGlobal,
})
}
resolve();
})
})
}
// Implement the Gatsby API "onCreatePage". This is
// called AFTER every page is created.
exports.onCreatePage = async ({ page, boundActionCreators }) => {
const { createPage } = boundActionCreators;
return new Promise((resolve, reject) => {
page.layout = "main-layout";
// Update the page.
createPage(page);
resolve();
});
};
exports.createPages = ({graphql, boundActionCreators}) => {
const {createPage} = boundActionCreators;
return new Promise((resolve, reject) => {
graphql(`
{
allDirectusPost {
edges {
node {
id
slug
status
}
}
}
}
`).then(result => {
if (result.errors) {
console.log(result.errors);
reject(result.errors);
}
const pageTemplate = path.resolve('./src/templates/blog/Post.js');
if (result.data !== undefined) {
_.each(result.data.allDirectusPost.edges, edge => {
if (edge.node.slug !== '') {
createPage({
path: `/blog/${edge.node.slug}`,
component: slash(pageTemplate),
layout: 'main-layout',
context: {
id: edge.node.id,
}
})
}
})
}
}).then(() => {
graphql(`
{
allDirectusPackage(filter: {type: {eq: "Limited Company"}}) {
edges {
node {
directusId
name
price
description
slug,
products {
data {
id
name
description
}
}
}
}
}
}
`).then(result => {
if (result.errors) {
console.log(result.errors);
reject(result.errors);
}
const pageTemplate = path.resolve('./src/templates/package/Package.js');
if (result.data !== undefined) {
_.each(result.data.allDirectusPackage.edges, edge => {
if (edge.node.slug !== '') {
createPage({
path: `/${edge.node.slug}`,
component: slash(pageTemplate),
layout: 'main-layout',
context: {
name: edge.node.name,
}
})
}
})
}
})
}).then(() => {
graphql(`
{
allDirectusService(filter: {type:{regex: "/^(additional-service|address-service)$/"}}) {
edges {
node {
directusId
name
subheading
renewal_text
price
slug
faqs {
data {
question
answer
}
}
}
}
}
}
`).then(result => {
if (result.errors) {
console.log(result.errors);
reject(result.errors);
}
const pageTemplate = path.resolve('./src/templates/services/Service.js');
if (result.data !== undefined) {
_.each(result.data.allDirectusService.edges, edge => {
if (edge.node.slug !== '') {
createPage({
path: `/services/${edge.node.slug}`,
layout: 'main-layout',
component: slash(pageTemplate),
context: {
name: edge.node.name,
id: edge.node.id
}
})
}
})
}
resolve();
})
})
})
}
exports.modifyWebpackConfig = function (_ref, options) {
var config = _ref.config,
stage = _ref.stage;
var cssFiles = /\.css$/;
var sassFiles = /\.s[ac]ss$/;
var sassModulesFiles = /_\.s[ac]ss$/;
var sassLoader = `sass?${JSON.stringify(options)}!import-glob`;
config.merge({
resolve: {
root: path.resolve('./src'),
extensions: ['', '.js', '.jsx', '.json'],
},
module: {
noParse: /node_modules\/reactstrap-tether\/dist\/js\/tether.js/,
},
// { test: /\.scss$/, loader: ExtractTextPlugin.extract(scssLoader) }, // SASS & CSS FILES
// {test: /\.css/, loader: ExtractTextPlugin.extract(cssLoader)},
});
config.loader(`sass`, {
test: sassFiles,
exclude: sassModulesFiles,
loader: ExtractTextPlugin.extract([`css?minimize`, sassLoader],{ options: {
sourceMap: true
}}),
});
config.loader(`sassModules`, {
test: sassModulesFiles,
loader: ExtractTextPlugin.extract(`style`, [
cssModulesConfig(stage),
sassLoader,
],
{ options: { sourceMap: true }}),
});
config.removeLoader('css');
config.loader('css', function(cfg) {
cfg.test = /\.css$/;
cfg.loader = ExtractTextPlugin.extract('css?minimize',{
options: {
sourceMap: true
}});
return cfg
})
config.plugin('extract-css',
ExtractTextPlugin,
["styles.css", { allChunks: true }]);
return config
};
exports.modifyBabelrc = ({ babelrc }) => ({
...babelrc,
plugins: babelrc.plugins.concat(['transform-decorators-legacy', 'transform-regenerator']),
})
```