webpack + sass에 반응을 추가하는 방법은 무엇입니까?

Question

config webpack +에서 sass (jsx import 'style.sass')를 올바르게 추가하는 방법은 무엇입니까?

var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, './'); 
var APP_DIR = path.resolve(__dirname, 'src/'); 

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
     path: BUILD_DIR, 
     filename: 'bundle.js' 
    }, 
    devServer: { 
     contentBase: BUILD_DIR 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?/, 
       include: APP_DIR, 
       loader: 'babel-loader' 
      } 
     ] 
     , 
     rules: [{ 
      test: /\.scss$/, 
      use: [{ 
       loader: "style-loader" // creates style nodes from JS strings 
      }, { 
       loader: "css-loader" // translates CSS into CommonJS 
      }, { 
       loader: "sass-loader" // compiles Sass to CSS 
      }] 
     }] 
    } 
}; 

module.exports = config; 

오류 : 모듈에서

ERROR in ./src/index.jsx Module parse failed: C:\Users\steko\Desktop\TEST\m-react\src\index.jsx Unexpected token (9:8) You may need an appropriate loader to handle this file type. | render() { | return (| | Hello React Project!!! |

git

Answer 1

가 웹팩 섹션이 웹팩 코드에 플러그인 영역에 다음이

module: { 
    rules: [ 
     { 
      test: /\.jsx?/, 
      loader: 'babel-loader', 
      include: APP_DIR 
     }, 
     { 
      test: /\.scss$/, 
      use: ExtractTextPlugin.extract({ 
       fallback: "style-loader", 
       use: "css-loader!sass-loader", 
      }) 
     } 
    ] 
} 

을이

할

plugins: [ 
    new ExtractTextPlugin('style.css'), 
] 

당신은 여전히 ​​문제가 있다면 알려 주시기 마십시오이 패키지 extract-text-webpack-plugin

가 필요합니다.

Answer 2

위의 ExtractTextPlugin은 js 코드와 css 코드를 2 개의 개별 파일로 추출하기위한 것입니다. 이것은 훌륭하지만 확실한 의미는 아닙니다.

그래서 웹 팩 빌드의 sass 파일을 구문 분석합니다. 나중에 jss 파일에 CSS를 남기거나 추출 할 것인지 결정할 수 있습니다.

• 을에서 CSS 로더
• 마지막으로 스타일 로더

을 다음 말대꾸 파일

를 분석 적용 :

loaders: [ 
     { 
      test: /\.scss$/, 
      loader: "style-loader!css-loader!sass-loader" 
     } 
] 

해당 로더는 너무 오른쪽에서 왼쪽으로 적용됩니다 끝내려면로드하는 다른 CSS 파일처럼 js 출력 파일의 CSS 코드를 사용할 준비가되어 있어야합니다.