У меня довольно простой файл веб-пакета, который берет несколько машинописных текстов + scss и обрабатывает его.Я заметил, что когда я вложил scss, webpack вообще не будет преобразовывать его в css.У меня нет данных об этом в переданном файле.Но когда у меня нет вложенных scss, все работает как положено.
В качестве примера, это scss, который у меня есть, который не создается с моей конфигурацией webpack.
.my-gallery {
border: 2px solid red;
&-img {
border: 2px solid blue;
}
}
Однако, когда у меня есть такой scss, все работает как положено.
.my-gallery {
border: 2px solid blue;
}
.my-gallery-img {
border: 2px solid red;
}
Что я мог сделать неправильно в моей конфигурации веб-пакета?Ниже я приложил мою текущую конфигурацию и мои зависимости dev.
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: ["./app/main.ts"],
watch: true,
mode: "production",
output: {
filename: "[name].js",
path: path.resolve(__dirname, "static")
},
module: {
rules: [
{
// Transform es6+ js & ts into es5 js.
test: [/.js$|.ts$/],
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/typescript"]
}
}
},
{
// Transform scss to css, minify it, apply autoprefixer via postcss
test: [/.css$|.scss$/],
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
"postcss-loader"
]
}
]
},
resolve: {
extensions: [".js", ".ts"]
},
plugins: [
new MiniCssExtractPlugin({
//Writes all styles to a single style.css file.
filename: "css/[name].css"
})
]
};
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-typescript": "^7.3.3",
"babel-loader": "^8.0.6",
"autoprefixer": "^9.6.1",
"webpack": "^4.36.1",
"webpack-cli": "^3.3.6",
"mini-css-extract-plugin": "^0.7.0",
"node-sass": "^4.12.0",
"css-loader": "^3.1.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0"
}