Как импортировать все CSS файлы в подкаталоге с помощью webpack / post css @import '../Components/**/_partial.css'; - PullRequest
Новая
       81

Как импортировать все CSS файлы в подкаталоге с помощью webpack / post css @import '../Components/**/_partial.css';

0 голосов
/ 11 апреля 2020

Использование среды Webpack и Post CSS Я бы хотел импортировать все файлы CSS в папку «Мои компоненты» и подкаталог. Я пробовал оба Post CSS plugins post css -easy-import & post css -import и знаю, что они оба должны идти первыми. Обычный импорт с прямыми путями работает, может быть, ** заполнители не работают?

Заранее спасибо

1 Ответ

0 голосов
/ 11 апреля 2020

Для импорта файлов css или s css рекомендуется импортировать все ваши файлы или компоненты css в один основной файл. css или s css. Затем импортируйте этот файл в файл *. js и, наконец, установите этот файл *. js в файле конфигурации вашего веб-пакета как запись.

Например, если у вас есть папка с именем SampleProject и структура папок и файлов выглядит следующим образом: 

SampleProject
|
|--css
|  |--components
|  |  |--style1.css
|  |  |--style2.css
|  |  |--style3.css
|
|--js
|  |--components
|  |  |--script1.js
|  |  |--script2.js
|
main.css
index.js
index.html
webpack.prod.js
package.json

Затем вы можете импортировать все 3 файла стилей в свой основной файл. css, как показано ниже:

main. css

@import 'css/components/style1.css';
@import 'css/components/style2.css';
@import 'css/components/style3.css';

Затем вы можете импортировать основной файл. css в индекс. js с другими js фрагментами, например так:

index. js

import './main.css';
import 'js/components/script1.js';
import 'js/components/script2.js';

Наконец, вы можете использовать этот индекс. js в качестве точки входа в файл конфигурации вашего веб-пакета, например:

webpack.prod. js: 

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  entry: {
    main: './index.js'
  },
  output: {
    path: path.join(__dirname, './build'), 
    filename: '[name].[chunkhash:8].bundle.js',
    chunkFilename: '[name].[chunkhash:8].chunk.js',
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', 
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', 
          'postcss-loader', 
          //'sass-loader',
        ],
      },
      {
        test: /\.(png|svg|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader', 
            options: {
              name: '[name].[ext]',
              outputPath: 'assets/img',
              esModule: false,
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader', 
            options: {
              name: '[name].[ext]',
              outputPath: 'assets/font',
            },
          },
        ],
      },
      {
        test: /\.html$/i,
        use: {
          loader: 'html-loader',
          options: {
            attributes: {
              list: [
                {
                  tag: 'img',
                  attribute: 'src',
                  type: 'src',
                },
                {
                  tag: 'img',
                  attribute: 'srcset',
                  type: 'srcset',
                },
                {
                  tag: 'img',
                  attribute: 'data-src',
                  type: 'src',
                },
                {
                  tag: 'img',
                  attribute: 'data-srcset',
                  type: 'srcset',
                },
              ],

            },
          },
        },
      },
    ],
  },
  optimization: {
    minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()],
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
      chunks: 'all',
    },
    runtimeChunk: {
      name: 'runtime',
    },
  },
  plugins: [
    // load jQuery
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),

    new CleanWebpackPlugin(),

    new MiniCssExtractPlugin({
      filename: '[name].[chunkhash:8].bundle.css',
      chunkFilename: '[name].[chunkhash:8].chunk.css',
    }),

    new HtmlWebpackPlugin({
      chunks: ['main'],
      template: 'index.html',
      filename: 'index.html',
    }),

  ],
};

И MiniCssExtractPlugin автоматически извлечет все стили вашего проекта и сохранит их как один файл в папке build в root вашего проекта.

...