Я перешел с gulp на webpack, и у меня возникли проблемы с компиляцией SASS.
Мне удалось не вставлять строку (хотя я хотел бы выбрать, будет ли она встроенной или нет, но я решу это после того, как я это решу).
Итак, у меня есть 2Файлы .scss, которые мне нужно импортировать и создавать отдельно, а не для автоматического импорта в .html, тоже подойдут.
я пробовал:
- запись: [] подход,
- пробовал с ExtractTextPlugin.extract и
- с MiniCssExtractPlugin.
- Я много искал и безрезультатно.
Мои текущие файлы webpack.config.js:
const HtmlWebPackPlugin = require("html-webpack-plugin");
//const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = (env, options) => {
//const isDevMode = options.mode === "development";
return {
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [{
loader: "html-loader",
options: {
minimize: true,
conservativeCollapse: false,
removeScriptTypeAttributes: false,
removeStyleTypeAttributes: false,
}
}]
},
{
test: /\.scss$/,
//use: ExtractTextPlugin.extract({
use: [
{ loader: MiniCssExtractPlugin.loader },
{
loader: "css-loader",
options: {
minimize: true
}
},
{
loader: "postcss-loader",
options: {
plugins: [
require("autoprefixer")(),
require('cssnano')({
preset: 'default',
discardComments: {
removeAll: true,
}
})
],
}
},
{
loader: "sass-loader",
}
]
//})
},
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].[hash].css",
chunkFilename: "[id].css"
})
]
};
};
для создания файла .cssот:
./src/css/styles.scss
./src/css/teste.scss
ожидаемый результат должен быть
./dist/assets/css/styles.css
./dist/assets/css/teste.css