强制 sass-loader 修改 css 文件答案

【问题标题】：Force sass-loader to modify css files强制 sass-loader 修改 css 文件
【发布时间】：2018-11-27 03:36:32
【问题描述】：

我正在尝试配置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 文件？

【问题讨论】：

我认为不同的扩展都被硬编码到 sass-loader 中：like here 也许你可以直接在 loader-pipeline 中将 rename them 写入 .scss，然后将它们提供给 sass-loader ?
我希望可以，所以我不会浪费太多时间，问题是css 文件位于第三方库中，就像这里github.com/isagalaev/highlight.js/tree/master/src/styles
是的，但是在加载器中执行它可能看起来像{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", "sass-loader", {loader: "rename-loader", options{filename:"[name].scss'}} ] }, 虽然这只是猜测，但它是一个非常小的加载器，所以我想知道定制有多难。github.com/ax-schneider/rename-loader/blob/master/index.js
我已经尝试过了，并把它放在上面的例子中，它没有用:(关于重命名的想法很棒。我想我可以在代码中像@import 'runTimefile.scss'一样添加类似@ 987654343@你有草图可以完成吗？

标签： webpack sass css-loader sass-loader

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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",

【讨论】：

如果我指定任何文件名，但在 imports 中 .css ，它会正确转换，请参阅我的示例中的 .a.fff 。问题是，我从 3rd 方库导入 css，它没有 .scss 文件。我看不出您的代码与我的代码有何不同。
也许您可以导入body之前的文件，然后在正文中展开类。
好主意，但我不知道 3rd-party lib 中列出了哪些类（我的意思是它可能是 .red，也可能是 .cyan），有什么方法可以解决未知上课？
第 3 方库是您通过直接 url 包含的东西，还是您下载的文件。如果您已经下载了该库，您可以简单地将其重命名为_b.scss，因此它是部分的。然后它应该工作：stackoverflow.com/questions/24307455/…
您的意思是将文件从node_modules 复制到源目录吗？我想避免它。