홈>2020-02-26 12:32

웹팩 4 - 별도의 파일로 css에서 scss

웹팩 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')
    })
  ],
}

webpack

답변 # 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

Python2.net

웹팩 4 - 별도의 파일로 css에서 scss

관련 자료