>

웹팩 4를 사용하여 ES6 자바 스크립트를 Sass와 별도로 한쪽에 번역하고 싶습니다 :

  • src/js/index.js → 정적 /js/index.js
  • src/css/style.scss → static/css/style.css

현재 웹팩 구성이 자바 스크립트를 bundle.js로 올바르게 변환하는 것처럼 보이지만 SCSS에서 CSS로 올바르게 변환 할 수 없습니다.

어쨌든 디버깅을 시도하지만 Webpack 내부에 대해 잘 모르기 때문에 어떻게 해야할지 모르겠습니다.

webpack.config.js 따라 가기 :

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    bundle: './src/js/index.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve('static/js')
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          { loader: "css-loader" },     
          { 
            loader: "sass-loader",
            options: {
              includePaths: [
                path.resolve("./src/css")
              ]
            }
          },
        ]
      }),
    }]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: path.resolve('static/css/style.css')
    })
  ],
}


  • 답변 # 1

    webpack v4 용 mini-css-extract-plugin을 사용해보십시오.

    ...와 같은 별도의 웹팩 구성 파일을 만들었습니다.

    const path = require('path');
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    module.exports = {
      entry: './server/styles/styles.scss',
      output: {
        path: path.resolve(__dirname, 'public')
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: "styles.css"
        })
      ],
      module: {
        rules: [
          {
            test: /\.s?css$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              'sass-loader'
            ]
          }
        ]
      }
    }
    
    

    이유는 확실하지 않지만 필요한 CSS 번들로 자바 스크립트 파일을 생성하는 중입니다.

  • 답변 # 2

    extract-text-webpack-plugin은 webpack 4에서 제대로 작동하지 않습니다.

    Michael Ciniawsky에 따르면 :

    와이즈 비즈

    이 문제를 극복하기 위해 mini-css-extract-plugin이 있습니다.

    이 주제에 대한 자세한 내용은 여기를 참조하십시오

    extract-text-webpack-plugin reached a point where maintaining it become too much of a burden and it’s not the first time upgrading a major webpack version was complicated and cumbersome due to issues with it

  • 이전 node.js - 사투리 개체로 인해 순차 마이그레이션 실패 개체 지원되지 않는 오류
  • 다음 html - 사이드 바가있는 스티커 바닥 글