使用 Webpack 编译 SASS 文件

Question

我想使用 webpack，它会自动将 /src/app 文件夹中的所有 .scss 文件编译成单个 .css 文件，而无需我明确指向所有 .scss 文件/导入它们。

我正在尝试使用 ExtractTextPlugin 来执行此操作，但它似乎不起作用。我需要提供更具体的入口点吗？我的装载机配置不正确吗？还是有其他问题？谢谢！

webpack.config.js：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");

const config = {
  devtool: 'inline-source-map',
  entry: [
    "babel-polyfill",
    SRC_DIR + "/app/index.js"
    SRC_DIR + "/app/"
  ],
  target: 'web',
  output: {
    path: DIST_DIR + "/app/",
    filename: "bundle.js",
    publicPath: "/app/"
  },
  devServer: {
    contentBase: './dist',
    historyApiFallback: true,
    hot: true,
    proxy: {
      '/api': {
        target: 'http://localhost:5001',
        secure: false,
      },
    }
  },
  plugins: [
    new ExtractTextPlugin({filename: "foo.css", allChunks: true})
  ],
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          failOnWarning: false,
          failOnError: true
        }
      },
      {
        test: /\.js$/,
        include: SRC_DIR,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'stage-2']
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: 'css-loader?importLoaders=1',
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
          loader: 'image-webpack-loader',
          query: {
            mozjpeg: {
              progressive: true,
            },
            gifsicle: {
              interlaced: false,
            },
            optipng: {
              optimizationLevel: 7,
            },
            pngquant: {
              quality: '75-90',
              speed: 3,
            },
          },
        }],
        exclude: path.resolve(__dirname, "node_modules"),
        include: __dirname,
      },
      {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        // loader: "url?limit=10000"
        use: "url-loader"
      },
      {
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
        use: 'file-loader'
      },
    ]
  },
};

module.exports = config;

package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "watch": "webpack --progress --watch",
    "start": "yarn build",
    "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --inline --hot --history-api-fallback",
    "build:dev": "webpack && cp src/index.html dist/index.html",
    "build:prod": "webpack -p && cp src/index.html dist/index.html"
  },
  "author": "",
  "license": "UNLICENSED",
  "devDependencies": {
    "babel-cli": "7.0.0-beta.3",
    "babel-eslint": "7",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.7",
    "enzyme": "^3.1.0",
    "enzyme-adapter-react-16": "^1.0.1",
    "eslint": "3.x",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.4.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "fetch-mock": "^6.0.0-beta.7",
    "file-loader": "^0.11.2",
    "image-webpack-loader": "^3.4.2",
    "jest": "^23.1.0",
    "jest-enzyme": "^4.0.0",
    "jest-fetch-mock": "^1.6.4",
    "node-sass": "^4.9.0",
    "redux-mock-store": "^1.5.3",
    "sass-loader": "^6.0.6",
    "url-loader": "^0.5.9",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  },
  "dependencies": {
    "@trendmicro/react-toggle-switch": "^0.5.7",
    "babel-polyfill": "^6.26.0",
    "cross-fetch": "^1.1.1",
    "font-awesome": "^4.7.0",
    "highcharts": "^6.0.4",
    "history": "^4.7.2",
    "js-cookie": "^2.2.0",
    "less-loader": "^4.0.5",
    "libphonenumber-js": "^0.4.42",
    "lodash": "^4.17.4",
    "moment": "^2.19.1",
    "prop-types": "^15.6.0",
    "query-string": "^5.0.1",
    "rc-time-picker": "^3.1.0",
    "react": "^16.0.0",
    "react-animations": "^1.0.0",
    "react-autosuggest": "^9.3.4",
    "react-circular-progressbar": "^0.8.0",
    "react-datepicker": "^0.59.0",
    "react-dom": "^16.0.0",
    "react-highcharts": "^15.0.0",
    "react-list": "^0.8.8",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.6",
    "react-select": "^1.0.0-rc.10",
    "react-transition-group": "^1.2.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "styled-components": "3.2.3",
    "twilio-client": "^1.4.33"
  },
  "jest": {
    "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js"
  }
}

Answer 1

无需我明确指出所有 .scss 文件 / 导入它们。

你不能那样做，webpack 不像 gulp 或其他任务运行器，你可以只指向模式，它会对它们应用转换。

Webpack 使用依赖图，这些图将从您的入口点开始。在每个入口点上，它读取依赖项并应用为每个文件扩展名指定的那些加载程序。 Webpack 只知道该文件的存在，如果它被导入到任何属于依赖关系图的文件中。

如果您想按照您描述的方式转换 css，我建议您转向更多任务运行器库，例如 gulp。