npm 시작과 함께 ES6 (반응) 구성 요소와 기초 새총을 컴파일하는 방법

Question

반응 프로젝트를 설정하기 위해 this tutorial을 따라 갔고 나는 그것을 생각했다고 생각했습니다. 모든 것을 설치 한 후에야 정상적으로 작동합니다.

하지만 프런트 엔드 라이브러리로 Foundation을 사용하는 웹 사이트를 만들어야합니다. 위의 링크 된 튜토리얼은 npm start을 실행할 때 server.js를 실행하지만 foundation-cli는 CSS에 대한 모든 기초 sass 코드를 컴파일하는 데 동일한 명령을 사용합니다.

npm start을 실행하는 순간에는 반응이없고 기초 만 실행됩니다. 어떻게 재단을 운영 할 수 있습니까? 자동으로 실행되도록 할 수 있습니까?

Answer 1

이미 Webpack을 사용하고 있으므로 로더 중 하나를 사용하여 CSS를 컴파일하는 것이 좋습니다. This one가 그 일을 할 수있는 것처럼 보입니다.

이 테스트되지 않은,하지만 난 당신이이처럼 웹팩 설정에 추가 할 수 있습니다 가정

// be sure to install it with 
// npm install sass-loader node-sass --save-dev 

const path = require('path'); 

module.exports = { 
    context: path.join(__dirname, 'src'), 
    entry: [ 
    './main.js', 
    ], 
    output: { 
    path: path.join(__dirname, 'www'), 
    filename: 'bundle.js', 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     use: [ 
      'babel-loader', 
     ], 
     }, 
     { 
     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 
     } 
     } 
    ], 
    }, 
    resolve: { 
    modules: [ 
     path.join(__dirname, 'node_modules'), 
    ], 
    }, 
};