Não é possível obter Webpack para a saída empacotado css?

votos
0

Eu sou novo para Webpack e seguindo um curso. Mas uma coisa que realmente não falar é como compilar sass diferente para css.

Eu dei-lhe uma tentativa aqui, mas estou recebendo um erro. Eu estou tentando fazê-lo saída para styles.css para uso com wordpress

const path = require('path'),
settings = require('./settings');

module.exports = {

  entry: {
    home: [
            settings.themeLocation + js/scripts.js
        ],
        style: [
            settings.themeLocation +'styles/main.sass'
        ]
    App: settings.themeLocation + js/scripts.js
  },
  output: {
    home: [
    path: path.resolve(__dirname, settings.themeLocation + js),
    filename: scripts-bundled.js
    ]
    style:[
    path: path.resolve(__dirname, settings.themeLocation + styles),
    filename: styles-bundled.css
    ]
  },
  module: {

    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      { test: /\.css$/, use: 'css-loader' }
      { test: /\.sass$/, use: 'sass-loader' }
    ]
  },
  mode: 'development'
}
Publicado 20/09/2018 em 04:19
fonte usuário
Em outras línguas...                            


1 respostas

votos
2

Aqui está um trecho do meu Webpack configuração

Você precisa instalar style-loader, css-loader e sass-loader
O seguinte trecho é para parte de desenvolvimento

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

para a produção

{
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true,
                            importLoaders: 2,
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: true,
                            importLoaders: 3,
                        },
                    },
                    'sass-loader',
                ],
            },

E adicionar o folling para plugin secção

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

Note-se que os trechos acima podem não trabalhar diretamente para você, sua é só para lhe dar idéia de como Webpack pode lidar com css $ SCSS

Respondeu 20/09/2018 em 05:08
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more