webpack 2에 가져 오기 경로를 올바르게 추가하는 방법

Question

webpack 2를 사용하여 가져 오기 경로에 기초 scss를 추가하는 올바른 방법을 이해하는 데 문제가 있습니다. 기초 문서의 Compiling Manually section에서 볼 수 있듯이 로드 경로에 'node_modules/foundation-sites/scss'를 추가해야 webpack2에서 찾을 수 있습니다.

다음으로 프레임 워크 파일을 가져 오기 경로로 추가하십시오. ' packages_folder/재단 - 사이트/SCS들

나는 많은 비슷한 질문과 webpack2에 대한 설명서,하지만 여전히 수를 읽었습니다 : 당신이 어떻게 은 빌드 프로세스에 따라 다르지만 경로에 관계없이 동일합니다 그게 효과가있는 것처럼 보입니다. 당신이 볼 수 있듯이

const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: ['./src/index.js', './src/scss/main.scss'], 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist') 
    }, 
    devServer: { 
    contentBase: './dist' 
    }, 
    resolve: { 
    modules: [ 
     path.resolve(__dirname, "node_modules/foundation-sites/scss"), 
     "node_modules" 
    ], 
    extensions: [".js", ".json", ".scss"], 
    }, 
    module: { 
    rules: [ 
     { // scss loader for webpack 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']) 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin({ // define where to save the file 
     filename: 'styles.css', 
     allChunks: true 
    }) 
    ], 
} 

내가 resolve.modules 키를 추가하고 기본 node_modules 디렉토리에 추가 path.resolve(__dirname, "node_modules/foundation-sites/scss")을 추가하려고 : 이것은 내 webpack.config.js 파일입니다.

나는이 내 주하는 SCS 파일에 @import foundation 날을 허용 할 것으로 예상하지만, 만들 때 오류가 발생합니다 :

ERROR in ./src/scss/main.scss 
Module build failed: ModuleBuildError: Module build failed: 
@import 'foundation'; 
^ 
     File to import not found or unreadable: foundation. 

사람이 알고 있나요

내가 잘못 여기서 뭐하는거야? 가져 오기 경로에 기초 디렉토리를 올바르게 추가하려면 어떻게해야합니까?

Answer 1

나는 아무 생각도 이유가 없다, 그러나 이것은 일 :

const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: ['./src/index.js', './src/scss/main.scss'], 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist') 
    }, 
    devServer: { 
    contentBase: './dist' 
    }, 
    module: { 
    rules: [ 
     { // scss loader for webpack 
     test: /\.scss$/, 
     use: [ 
      { 
      loader: 'css-loader' 
      }, 
      { 
      loader: 'sass-loader', 
      options: { 
       includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")] 
      } 
      } 
     ] 
     } 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin({ // define where to save the file 
     filename: 'styles.css', 
     allChunks: true 
    }) 
    ], 
}