代码之家 › 专栏 › 技术社区 › deathangel908

强制sass加载程序修改css文件

sass-loader css-loader sass webpack

1

deathangel908 · 技术社区 · 6 年前

sass-loader ,所以它发生了 .css .scss .但是它总是输出CSS文件。

{
  "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"
  }
}

以下内容:

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",
        ]
      },
    ],
  },
};

(让我们看看如果SASS加载器面临未知扩展会发生什么情况):

.black {
    background-color: black
}

以下内容:

.red {
    background-color: red
}

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

node ./node_modules/webpack/bin/webpack.js

.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加载器受到威胁吗

2 回复 | 直到 6 年前

1

ippi 6 年前

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

把你的薪水寄给我。;)

test: /\.css$/, 不会捕获任何内容,因为@imports完全由sass加载器/节点sass处理,所以在第一个sass规则生效后就不会涉及Webpack。

2

1

SuperDJ Franklin Rivero 6 年前

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",