Webpack을 사용하여 SCSS 전역 변수 확인

Question

해결할 scss 전역 변수 파일을 가져 오는 데 문제가 있습니다. 나는 그것이 필요할 때마다 간단히 전역으로 가져올 수있는 scss 색상 파일을 추가하려고합니다.

웹팩 1 설정 :

웹팩 :

module: { 
    loaders: [ 
     { 
     test: /\.scss$/, 
     loader: 'style' + 
     '!css' + 
      '?sourceMap' + 
      '&modules' + 
      '&importLoaders=1' + 
      '&localIdentName=[local]__[hash:base64:4]' + 
     '!sass' + 
      '?sourceMap' 
     } 
    ] 
    }, 
    sassLoader: { 
    includePaths: [ 
     path.resolve(__dirname, '../src/<path to stylesheets>/themes') 
     ] 
    }, 

말대꾸 내가 작업 솔루션을 발견

./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[local]__[hash:base64:4]!./~/sass-loader/lib/loader.js?sourceMap!./src/<path to file>/toggle-item-button/item-icon.scss 
Module build failed: 
@import "colors"; 
^ 
     File to import not found or unreadable: colors 
Parent style sheet: stdin 
     in /Users/<me>/Checkouts/<my project>/src/<path to file>/toggle-item-button/item-icon.scss (line 1, column 1) 
Error: 
@import "colors"; 
^ 
     File to import not found or unreadable: colors 
Parent style sheet: stdin 
     in /Users/<me>/Checkouts/<my project>/src/<path to file>/toggle-item-button/item-icon.scss (line 1, column 1) 
    at options.error (/Users/<me>/Checkouts/<my project>/node_modules/node-sass/lib/index.js:286:26) 

@ ./src/<path to file>/toggle-item-button/item-icon.scss 4:14-229 

Answer 1

@import "colors"; 

.add { 
    background: $button-inactive-state; 
} 

오류 코드 (편집 됨 개인적인 항목) 파일 구성 :

resolve: { 
    alias: { 
     themes: path.resolve(__dirname, '../src/<path to stylesheets>/themes') 
    }, 
    }, 

SCSS

@import "~themes/colors";