Webpack 4:SCSS 到 CSS 到单独的文件 [英] Webpack 4: SCSS to CSS into separate file

问题描述

我想使用 Webpack 4 在一侧将我的 ES6 Javascript 与 Sass 分开:

I would like to use Webpack 4 to transpile on one side my ES6 Javascript separately from my Sass:

• src/js/index.js → 静态/js/index.js
• src/css/style.scss → 静态/css/style.css

目前我的 webpack 配置似乎正确地将 javascript 转换为 bundle.js，但我无法让我的 SCSS 正确地转换为 CSS.

Currently my webpack configuration seems to correctly transpile the javascript into a bundle.js but I cannot get my SCSS to transpile to CSS correctly.

我肯定会尝试以某种方式进行调试，但由于我对 Webpack 内部结构非常无知，因此我不知道该怎么做.

I would definitely try to debug somehow but since I'm very ignorant on Webpack internals I'm not sure how to do it.

关注我的 webpack.config.js:

Following my 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')
    })
  ],
}

推荐答案

尝试 mini-css-extract-plugin 用于 webpack v4.

Try mini-css-extract-plugin for webpack v4.

我创建了一个单独的 webpack 配置文件，看起来像 ...

I created a separate webpack config file that looks like ...

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 包的 javascript 文件.

Not sure why, but it's also generating a javascript file with the required css bundle.

这篇关于Webpack 4:SCSS 到 CSS 到单独的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！