Webpack은 styles.scss에서 styles.css를 만들지 않습니다.

Question

저는 webpack에 새해졌습니다. 도와주세요. 내가 뭘 잘못했는지 모르겠다. 어떤 오류도 보여주지 않습니다 !!! 이것은 나의 webpack.config.js 파일입니다. bundle.js를 생성하지만 styles.scss에서 styles.css를 만들지 않습니다. 웹팩이 필요한 경우 static/css/에 style.css가 생성됩니다. 폴더 구조는 -

-package.json 
    -webpack.config.js 
    -static/ 
     css/ 
     js/ 
      src/main.js 
     sass/style.scss 

---

module.exports = { 
    entry: { 
     app: path.resolve(__dirname, './static/js/src/main.js'), 

    }, 
    output: { 
     path: path.resolve(__dirname, './static/js/'), 
     filename: 'bundle.js' 
    }, 
    module: { 
     rules: [ 

      { 
       test: /\.js$/, 
       exclude: /(node_modules)/, 
       use: { 
        loader: 'babel-loader', 
        options: { 
         presets: ['env', 'es2015', 'react'], 
         plugins: [require('babel-plugin-transform-object-rest-spread')] 
        } 
       } 
      }, 


      { 
       test: /\.scss$/, 
       exclude: /node_modules/, 
       use: ExtractTextPlugin.extract({ 
        use: ["css-loader", "sass-loader"], 
        fallback: "style-loader", 
        publicPath: path.resolve(__dirname, '/static/css') 

       }) 
      } 

     ] 
    }, 

    plugins: [ 


     new ExtractTextPlugin({ 
      filename: 'styles.css', 
      disable: false, 
      allChunks: true 
     }), 

     //reduce react size 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'NODE_ENV': JSON.stringify('production') 
      } 
     }), 

     new webpack.optimize.UglifyJsPlugin({ 
      compress: { 
       screw_ie8: false, 
       warnings: false 
      } 
     }), 
     new webpack.optimize.AggressiveMergingPlugin() 

    ] 
}; 

---

이 내 노드 미리 종속성 -

"devDependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-plugin-transform-object-rest-spread": "^6.26.0", 
    "babel-preset-env": "^1.6.1", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "css-loader": "^0.28.7", 
    "cssnano": "^3.10.0", 
    "extract-text-webpack-plugin": "^3.0.2", 
    "html-webpack-plugin": "^2.30.1", 
    "node-sass": "^4.7.2", 
    "optimize-css-assets-webpack-plugin": "^3.2.0", 
    "react": "^16.2.0", 
    "react-dom": "^16.2.0", 
    "sass-loader": "^6.0.6", 
    "style-loader": "^0.19.1", 
    "webpack": "^3.10.0", 
    "webpack-dev-server": "^2.9.7" 
    }, 

감사합니다.

Answer 1

일반적으로 webpack loaders는 자원 별 작업을 수행하지만 종속성을 정의해야하는 소스 코드는 해당 작업을 수행합니다. SCSS 스타일이 필요한 곳이면 소스 코드에서 해당 SCSS 파일을 가져와야합니다. 처음 듣기에는 이상하게 들릴지도 모르지만 webpack 작동 방법을 알려주세요.

그런데 구성이 나에게 좋을 것 같았습니다.

Webpack은 모두 양호한 경우 종속성 그래프에서 SCSS 종속성을 처리해야합니다.

출력에 SCSS 소스 파일이 처리 된 모든 신호가 표시됩니까? 출력 CSS 파일, 즉 require("./scss-file-here") 또는 import "./scss-file-here"

웹팩 가이드에서 소스 코드에서 그 가능성이 누락 된 부분이 누락 된 의존성 선언을 생성하지 않는 경우

here

이 파일에 import './style.css' 할 수 있습니다 그 스타일에 따라 달라집니다 .