使用 webpack 将 sass 提取为 css

Question

第一的。我知道有人问过这样的问题，但我缺少一些东西来理解它们。我正在尝试将 scss 编译为 css。我希望 webpack 基本上与sass app.scss : app.css. 我尝试使用 配置它extract-text-webpack-plugin，但我做错了什么或遗漏了一些东西。

如果我include(app.scss)在，它会起作用，app.js但这没有意义，因为如果有人禁用了 JavaScript，样式将不起作用。

这是我的webpack.config.js文件。我不知道该怎么做。

const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var jsConfig = {
  entry: "./_dev/scripts/app.js",
  output: { filename: "./scripts/bundle.js" },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  }
};

var scssConfig = {
  entry: "./_dev/scss/app.scss",
  output: { filename: "./content/app.css" },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({filename:"./_dev/scss/app.scss"}),
  ]
};

var config = [scssConfig, jsConfig];

module.exports = config;

编辑：我也发现了这个。这个系列对我所有的问题都有帮助，所以如果你有类似的问题，请务必在提问前阅读！

https://codeburst.io/simple-beginner-guide-for-webpack-2-0-from-scratch-part-v-495dba627718

Answer 1

您需要包含您的app.scssforwebpack才能找到您的scss引用，因为webpack它将遍历您的项目并将加载器应用于它可以通过从app.js递归开始的引用找到的所有文件。如果您没有app.scss对项目中某处的引用，webpack则无法找到它，也不会构建它。所以在你项目的条目中（假设它是app.js）你需要这样做：

import 'relative/path/to/styles/app.scss';

但这并不意味着没有js启用的人不会收到您的样式。您app.scss只需要build在项目的阶段包含，之后您的样式将被包含html并加载，即使是那些没有js启用的样式。

webpack 概念部分解释了如何webpack根据您entry构建其内部依赖关系图的点来查找依赖项。

更新：

有一种方法可以让您不在app.scss您的js. 您可以在webpack配置中的条目对象中包含多个文件。以下是您的情况下的配置示例：

const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var config = {
  entry: {
     main: [
        "./_dev/scripts/app.js", 
        "./_dev/scss/app.scss"
     ],
  },
  output: { 
    path: './scripts',
    filename:  "bundle.js" 
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.(css|scss)/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("./_dev/scss/app.scss"),
  ]
};

module.exports = config;

有关 SO 问题webpack-multiple-entry-points-sass-and-js 的更多信息。

您的ExtractTextPluginin配置也不正确webpack。您将整个路径放在 的选项中filename，这是不正确的。在您的情况下，它应该如下所示：

plugins: [
    new ExtractTextPlugin("./_dev/scss/app.css"),
  ]