Авторефиксер не работает в веб-пакете - PullRequest
Новая
       91

Авторефиксер не работает в веб-пакете

0 голосов
/ 31 мая 2018

Я пытаюсь настроить загрузчик с помощью веб-пакета, но при запуске сборки я не предоставляю версию CSS с автоматическим префиксом.

В custom.scss я добавил свои настройки, а затем импортировал загрузчик из моегоузловые модули.

Это мой webpack.config.js 

module.exports = {
entry: {
    scss: ['./src/scss/custom.scss']
},
module: {
    rules: [    
    {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [{
            loader: 'css-loader',
            options: {
                minimize: false,
                autoprefixer: true,
                sourceMap: true,
                importLoaders: 1
            }
        }, 'postcss-loader', 'sass-loader']
    })
   }
  ]
 },
 plugins: [
    new ExtractTextPlugin({
            filename: './assets/css/style.css',
            disable: false,
            allChunks: true
        }),
  ]
}

Это мой postcsss.config.js 

module.exports = {
  plugins: function () {
        return [
            require('precss'),
            require('autoprefixer')
        ];
    }
}

Когда я собираю, все загрузчикCSS добавляется в style.css, но он не предоставляет файл css с автоматическим префиксом.Префикс поставщика является обязательным, потому что это BS4, поэтому гибкость есть.

Спасибо.

1 Ответ

0 голосов
/ 31 мая 2018

Это моя конфигурация для начальной загрузки v4

webpack.config.js (для производства) 

test: /\.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader!resolve-url-loader!postcss-loader!sass-loader',
        }),

webpack.config.js (для разработки) 

test: /\.scss$/,
        exclude: /node_modules/,
        use: [
            {
                loader: 'style-loader',
            },
            {
                loader: 'css-loader',
                options: {
                    sourceMap: true,
                },
            },
            {
                loader: 'resolve-url-loader',
            },
            {
                loader: 'postcss-loader',
                options: {
                    sourceMap: true,
                },
            },
            {
                loader: 'sass-loader',
                options: {
                    sourceMap: true,
                },
            },
        ],

postcss.config.js 

module.exports = {
  plugins: [
    require('postcss-cssnext')({
      browserslist: [
        '> 1%',
        'last 2 versions',
      ],
    }),
  ],
};

И в моем файле main.scss я импортирую, как показано ниже, 

@import '~bootstrap/scss/bootstrap';

Знак тильды ( ~ ) сообщает webpackимпортировать из node_modules

Также вам нужно будет установить некоторые пакеты, если вы планируете использовать вышеуказанный config

  • postcss-cssnext
  • resol-url-loader

Я использую post-cssnext insted из autoprefixer .

...