упакуйте пакет SASS и создайте несколько файлов - PullRequest
0 голосов
/ 28 сентября 2018

Я перешел с 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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...