强制 sass-loader 修改 css 文件

Posted 2023-02-22

【中文标题】强制 sass-loader 修改 css 文件

【英文标题】：Force sass-loader to modify css files

【发布时间】：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

ma​​in.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", optionsfilename:"[name].scss' ] , 虽然这只是猜测，但它是一个非常小的加载器，所以我想知道定制有多难。github.com/ax-schneider/rename-loader/blob/master/index.js

我已经尝试过了，并把它放在上面的例子中，它没有用:(关于重命名的想法很棒。我想我可以在代码中像@import 'runTimefile.scss'一样添加类似@ 987654343@你有草图可以完成吗？

【参考方案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，因此它是部分的。然后它应该工作：***.com/questions/24307455/…

您的意思是将文件从node_modules 复制到源目录吗？我想避免它。