如何配置 sass-loader 以仅从 SCSS 生成 CSS答案

【问题标题】：How to configure sass-loader to produce only CSS from SCSS如何配置 sass-loader 以仅从 SCSS 生成 CSS
【发布时间】：2019-03-02 18:15:47
【问题描述】：

我正在尝试在 webpack.config 中使用 2 个模块除了构建 js 包，我想为网页构建 CSS，但总是出错

ERROR in ./src/sass/company-style.scss 1:3
    Module parse failed: Unexpected token (1:3)
    You may need an appropriate loader to handle this file type.
    > h1 {
    |   color: #c43f4c; }

公司风格.scss

$myred: #c43f4c;
h1 {
  color: $myred;
}

能否请您查看以下列表中的 cssConfig。我不明白如何正确配置加载器

webpack.config.js

const path = require('path')
var config = {
    // common Configuration
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                }
            }
            ,{
                test: /\.scss$/,
                use: [{
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader'
                }, {
                    loader: 'sass-loader'
                }]
            }

            ,{
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader'
                    }
                ]
            }
        ]
    }

};

var bundleConfig = Object.assign({}, config, {
    name: "js-bundle",
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
});
var cssConfig = Object.assign({}, config,{
    name: "css-bundle",
    entry: "./src/sass/company-style.scss",
    output: {
        filename: "company-style.css",
        path: path.resolve(__dirname, 'dist')
    },

    module: {
        rules: [
            {
                test: /\.scss$/,
                exclude: /(node_modules|bower_components)/,
                /*use: [{
                    loader: 'sass-loader'
                }]*/
                use: ['sass-loader']
            }
        ]
    }
});
module.exports = [
    bundleConfig, cssConfig
];

bundleConfig 模块没有问题。 bundle.js 构建并运行

【问题讨论】：

只是为了理解，您真的想制作一个单独的 CSS 文件还是只是希望您的应用包含 SCSS？

标签： webpack sass sass-loader

【解决方案1】：

如果我正确理解了这个问题，您希望从 SCSS 文件生成一个独立的 CSS 文件。

看看mini-css-extract-plugin。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    })
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      }
    ]
  }
}

【讨论】：

这是 javascript 社区的真正问题： - 而是回答简单的问题并解决问题 - 建议补丁，而不是另一个补丁，以及另一个......结果“节点模块”依赖项呈指数增长。噗……
谢谢。看起来这是唯一的解决方案。再次感谢您。
@AlexeiP 是的，我记得最初弄清楚这是一件令人困惑的事情。它有助于理解 Webpack 的目的是生产一个 Javascript 包。所以如果你使用style-loader，那么 CSS 实际上会被捆绑到 JS 中。然后在浏览器解析 JS 时应用样式。如果您创建一个导入 CSS 文件的虚拟项目，然后读取 Webpack 生成的bundle.js，您会看到这种行为。为了获得任何其他行为（例如移动/发射独立的 CSS 文件），我们使用 Webpack 插件。

【解决方案2】：

我从来没有见过这样列出的组合装载机，你试过这样的吗？

use: ['style-loader','css-loader', 'sass-loader']

【讨论】：

和这个一样。
@EMC 重点是生成 CSS 文件。据我了解 'css-loader' 从 sass-loader 获取 css 输出来生成 javascript。