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

Question

我正在尝试在 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; }

公司-style.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 已建成并正在运行

Answer 1

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

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

Answer 2

如果我对问题的理解正确，您想从 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',
        ],
      }
    ]
  }
}

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

How to configure sass-loader to produce only CSS from SCSS

webpack

sass

sass-loader