は、私は私のプロジェクト内の私のSCSSファイルをロードするためにSASS-ローダーを使用してもnode_modulesリゾルバなどを使用してい

Question

童話SASS-ローダ輸入node_modulesに反応します

をここでエラーメッセージ

01だ：動作していない私はnode_moduleの解決が自動でなければなりません sass-loaderから読み取ることができるものから、 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; 
}; 

にこれを渡しmはそれが表示されます

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