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