Webpack 2 @ import 문을 처리하는 방법?

나는 webpack으로 reactjs 프로젝트를 설정하는 법을 배웠다.Webpack 2 @ import 문을 처리하는 방법?

그래서이 프로젝트를 웹팩 구성으로 실행하려면 000-landing-page을 만들려고합니다. extract-text-webpack-plugin을 사용하고 싶습니다.

하지만 CSS 파일에는 import 문이 있습니다.

@import "https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"; 
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css";

그리고이 줄은 오류

가 발생

"예상치 못한 문자는 을 처리하기 위해이 파일을 적절한 로더를해야 할 수도 있습니다 @ 유형"

실제로 예외가 분명하지만 난 할 수 없었다 적절한 로더를 찾으십시오. html, 파일, URL 로더를 설치하고 몇 가지 구성을 시도했지만 완료하지 못했습니다.

다음은

{ 
      test: /\.css$/, 
      include: [ path.resolve(__dirname, "/node_modules/")], 
      loader: ExtractTextPlugin.extract({ 
      fallbackLoader: 'style-loader', 
      loader: [ 
      'css-loader', 
      'postcss-loader', 
      ], 
      }) 
     }, 
     { 
      test: /\.scss$/, 
      include: [ path.resolve(__dirname, "/node_modules/")], 
      loader: ExtractTextPlugin.extract({ 
      fallbackLoader: 'style-loader', 
      loader: [ 
       'postcss-loader', 
       'sass-loader', 
      'css-loader', 
      ], 
      }), 
     }

출처

2016-11-27 Burak Karasoy

가져 오기를 제거하면 작동합니까? – QoP

아니요, 예기치 않은 토큰에이 파일 유형을 처리하기 위해 적절한 로더가 필요할 수 있습니다 (이번에는 @import가 필요 없음). css css 파일을 여기에서 볼 수 있습니다 .https : //github.com/fullstackreact/react-daily-ui/blob/master/003-landing-page/src/App.css –

내가 제거하면 포함 : [ path.resolve (__ dirname, "/ node_modules /")],이 줄이 작동합니다. 하지만 오류를 일으키는 app.css는 src 디렉토리 (별도의 폴더)에있는 노드 모듈에 없습니다. 이상한입니다 –

때문입니다. 나는 webpack에 관한 초심자이기 때문에 작은 점을 놓쳤다. 아무것도 포함하여 포함되지 않은 경우

이 : [] 뭔가를 포함하여 포함 된 경우 모든 파일이

포함되어 있습니다 의미 : [파일 X]는 그것은 어떤 파일이 파일 X를 제외하고 포함을 의미합니다.

난 "은 다음을 포함한다 : path.resolve를 (__ dirname이는"이후 추가 /은/node_modules ")],"는 단지 node_modules 나의 src 폴더를 포함한다.

출처

2016-12-04 18:55:49

내가 로더 순서는 오른쪽에서 왼쪽으로 이해 내 CSS와 SCS들 로더입니다. 이 SCS들에 대한 로더 배열로 만들 것 :

['css-loader', 'postcss-loader', 'sass-loader']

는 본질적으로 그것은 @symbol와는 아무 상관이 없었다 합성 기능 즉 css(postcss(sass(file)))

출처

2016-11-27 22:27:20 Skiing

Webpack 2 @ import 문을 처리하는 방법?

답변

관련 문제