Question

我正在尝试配置sass-loader，因此它会将.css文件转换为.scss。但是它总是只输出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将威胁.css文件强制为.scss？

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文件

2 个答案: