强制sass-loader修改css文件

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

- deathangel908

---

我认为不同的扩展名已经被硬编码到sass-loader中了：像这里也许你可以直接在loader-pipeline中将它们重命名为.scss，然后将它们传递给sass-loader？ - ippi

我希望我能够这样做，这样我就不会浪费那么多时间了。问题是css文件位于第三方库中，就像这里https://github.com/isagalaev/highlight.js/tree/master/src/styles一样。 - deathangel908

是的，但在加载器中执行它可能看起来像这样：{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", "sass-loader", {loader: "rename-loader", options{filename:"[name].scss'}} ] }。虽然这只是猜测，但这是一个非常小的加载器，所以我想知道自定义有多难。https://github.com/ax-schneider/rename-loader/blob/master/index.js - ippi

我已经尝试过了，并且在上面的示例中也放置了它，但是它没有起作用:( 重命名的想法很棒。我猜我可以在代码中这样做 @import 'runTimefile.scss' 并添加类似于 CopyFileWebpackPlugin('old.css', 'runTimefile.scss') 的东西。你有任何实现它的草图吗？ - deathangel908

Answer 1

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

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

是的，省略扩展名将解决./b.css并将其视为scss语法。 给我发你的工资单吧。 ;)

奖励小知识: 您的第二个规则test: /\.css$/,将永远无法捕获任何内容，因为@imports完全由sass-loader/node-sass处理，因此在第一个sass-rule启动后webpack不再参与。

- ippi

Answer 2

你可以尝试以下代码，因为这是我使用的，我猜它可以输出你想要的结果。不过我使用的是 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",

- SuperDJ

---

如果我在导入中指定除 .css 以外的任何文件名，它都会正确转译，例如我的示例中的 .a.fff。问题是，我正在从第三方库中导入样式表，但它没有 .scss 文件。我看不出你的代码与我的有什么不同。 - deathangel908

也许你可以在 body 之前导入文件，然后只需在 body 中扩展类。 - SuperDJ

好主意，但我不知道第三方库中列出了哪些类（我的意思是它可能是.red，也可能是.cyan），有没有什么方法可以解决未知类的问题？ - deathangel908

第三方库是指通过直接URL包含的内容，还是指下载的文件？如果您已经下载了该库，则可以将其重命名为_b.scss，以便将其作为局部文件使用。然后它应该可以正常工作：https://dev59.com/vWAf5IYBdhLWcg3wwk4V - SuperDJ

你的意思是要将 node_modules 中的文件复制到源目录中吗？我想避免这种情况。 - deathangel908

我理解您想要避免这种情况，但这取决于第三方库的类型。 - SuperDJ