css - sass-loader 不生成 css

Question

我尝试更新 this webpack 配置从 scss 生成 css。我使用一个 css 规则将 styles.scss 添加到 src 文件夹中:

body{
  font-size: 38px;
}

如果我运行 yarn build 或 yarn dev，webpack 不会生成任何 css 文件，我也不会收到任何错误。

webpack.config.js

/* global __dirname, require, module*/

const webpack = require('webpack');
const path = require('path');
const env = require('yargs').argv.env; // use --env with webpack 2
const pkg = require('./package.json');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

let libraryName = pkg.name;

let outputFile, mode;

if (env === 'build') {
  mode = 'production';
  outputFile = libraryName + '.min.js';
} else {
  mode = 'development';
  outputFile = libraryName + '.js';
}

const config = {
  mode: mode,
  entry: __dirname + '/src/index.js',
  devtool: 'inline-source-map',
  output: {
    path: __dirname + '/lib',
    filename: outputFile,
    library: libraryName,
    libraryTarget: 'umd',
    umdNamedDefine: true,
    globalObject: "typeof self !== 'undefined' ? self : this"
  },
  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        loader: 'babel-loader',
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /(\.jsx|\.js)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: [
            // fallback to style-loader in development
            process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
        ]
    }
    ]
  },
  resolve: {
    modules: [path.resolve('./node_modules'), path.resolve('./src')],
    extensions: ['.json', '.js', '.scss']
  },
  plugins: [
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "[name].css",
        chunkFilename: "[id].css"
    })
]
};

module.exports = config;

package.json

{
  "name": "webpack-library-starter",
  "version": "1.0.2",
  "description": "Produce universal library with webpack and es6",
  "main": "lib/webpack-library-starter.js",
  "scripts": {
    "build": "webpack --env dev && webpack --env build && npm run test",
    "dev": "webpack --progress --colors --watch --env dev",
    "test": "mocha --require babel-register --colors ./test/*.spec.js",
    "test:watch": "mocha --require babel-register --colors -w ./test/*.spec.js",
    "test:cover": "cross-env NODE_ENV=test nyc mocha --require babel-register --colors test/*.js",
    "repl": "node -i -e \"$(< ./lib/webpack-library-starter.js)\""
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/krasimir/webpack-library-starter.git"
  },
  "keywords": [
    "webpack",
    "es6",
    "starter",
    "library",
    "universal",
    "umd",
    "commonjs"
  ],
  "author": "Krasimir Tsonev",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/krasimir/webpack-library-starter/issues"
  },
  "homepage": "https://github.com/krasimir/webpack-library-starter",
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.51",
    "@babel/core": "^7.0.0-beta.51",
    "@babel/preset-env": "^7.0.0-beta.51",
    "babel-eslint": "^8.0.3",
    "babel-loader": "^8.0.0-beta.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-istanbul": "^5.1.0",
    "babel-preset-env": "^7.0.0-beta.3",
    "babel-register": "^7.0.0-beta.3",
    "chai": "^4.1.2",
    "cross-env": "^5.2.0",
    "eslint": "^5.0.1",
    "eslint-loader": "^2.0.0",
    "jsdom": "11.11.0",
    "jsdom-global": "3.0.2",
    "mocha": "^4.0.1",
    "nyc": "^13.1.0",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "webpack": "^4.12.2",
    "webpack-cli": "^3.0.8",
    "yargs": "^10.0.3"
  },
  "nyc": {
    "sourceMap": false,
    "instrument": false
  },
  "dependencies": {
    "css-loader": "^2.1.1",
    "mini-css-extract-plugin": "^0.7.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1"
  }
}

Answer 1

检查，是否在入口js文件中导入了scss文件，例如index.js。