强制 sass-loader 修改 css 个文件

Question

我正在尝试配置 sass-loader，因此它会像 .scss 一样转译 .css 个文件。但是它总是按原样输出 css 个文件。

这是最小设置：

package.json:

{
  "dependencies": {
    "css-loader": "^0.28.11",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.3",
    "webpack": "^4.12.0",
    "style-loader": "^0.21.0",
    "webpack-cli": "^3.0.3",
    "mini-css-extract-plugin": "^0.4.0"
  }
}

webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: "./main.sass",
  resolve: {
    extensions: ['.sass', '.css'],
  },
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.sass$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader?indentedSyntax",
        ]
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ]
      },
    ],
  },
};

a.fff（让我们看看如果 sass-loader 面临未知扩展会发生什么）：

.black {
    background-color: black
}

b.css:

.red {
    background-color: red
}

main.sass:

body
    @import "./a.fff"
    @import "./b.css"

好的。现在让我们运行它 node ./node_modules/webpack/bin/webpack.js，然后检查 dist/main。css:

.red {
    background-color: red
}

body { }
  body .black {
    background-color: black; }

如您所见，a.fff 已正确转译，但 css 只是按原样粘贴。我想要得到的是：

body { }
  body .black {
    background-color: black; }
  body .red {
    background-color: red; }

有什么方法可以强制 sass-loader 以 .scss 的形式威胁 .css 文件？

Answer 1

您可以尝试以下操作，因为这是我使用的，我想它可以提供您正在寻找的输出。但是我使用 scss 而不是 sass:

test: /\.sass$/,
use: [
    MiniCSSExtractPlugin.loader,
    {
        loader: 'css-loader',
        options: {
            minimize: process.env.NODE_ENV === 'production'
        }
    },          
    'sass-loader'
]

plugins: [
    new MiniCSSExtractPlugin( {
        filename: 'dist/css/[name].css' // Specify output path and file name
    })

命令：

"dev": "./node_modules/.bin/webpack --config webpack.config.js --mode=development -w",

Answer 2

好的，你会喜欢这个答案的...

body
    @import "./a.fff"
    @import "./b"

是的，省略扩展名将解析 ./b.css 并将其视为 scss 语法。把你的薪水寄给我。 ;)

奖金琐事：你的第二条规则 test: /\.css$/, 永远不会捕捉到任何东西，因为@imports 完全由 sass-loader/node-sass 处理，所以在第一个 sass 规则启动后，webpack 永远不会参与。

强制 sass-loader 修改 css 个文件

Force sass-loader to modify css files

webpack

sass

css-loader

sass-loader