阵营故事书青菜装载机进口node_modules

Question

我使用的是青菜，加载器加载我的项目中我的SCSS文件，并使用node_modules解析器例如：@import '~styleguide/src/vars.scss'

当我试图加载反应，故事书我”中号路过这webpack.config.js

const path = require('path'); 
const autoprefixer = require('autoprefixer'); 

// load the default config generator. 
var genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js'); 

module.exports = function(config, env) { 
    var config = genDefaultConfig(config, env); 

    config.module.loaders.push({ 
    test: /\.html$/, loader: 'raw' 
    }); 
    config.module.loaders.push({ 
    test: /\.scss$/, 
    loaders: ['style', 'css?sourceMap', 'postcss-loader', 'sass?config=sassLoader'] 
    }); 

    config.sassLoader = { 
    includePaths: [ 
     path.resolve(__dirname, '..', 'src/scss') 
    ], 
    sourceMap: true 
    } 

    config.postcss = function() { 
    return [autoprefixer]; 
    } 

return config; 
}; 

从我可以从sass-loader阅读node_module决心应该是自动的，但它似乎不工作：

这里的错误信息

ERROR in ./~/css-loader?sourceMap!./~/postcss-loader!./~/sass-loader?config=sassLoader!./src/component.scss 
Module build failed: 
@import '~styleguide/src/vars'; 
^ 
     File to import not found or unreadable: ~styleguide/src/vars 
Parent style sheet: stdin 

任何人都有一个想法，为什么发生这种情况？

Answer 1

这为我们工作：

/* eslint-env node */ 
    const path = require('path'); 

    const include = path.resolve(__dirname, '..', 'src'); 

    module.exports = { 
     module: { 
      rules: [ 
       { 
        test: /\.scss$/, 
        loaders: ["style-loader", "css-loader", "sass-loader"], 
        include 
       } 
      ] 
     } 
    };