Как заставить postcss-loader, postcss-cssnext и sass-loader работать вместе в веб-пакете? - PullRequest
Новая
       101

Как заставить postcss-loader, postcss-cssnext и sass-loader работать вместе в веб-пакете?

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

Это мои Webpack конфиги для scss/css файлов. 

...
{
    test: /\.s?css$/,
    use: [
      'style-loader',
      { loader: 'css-loader', options: { importLoaders: 2 } },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: loader => [
            require('postcss-import')({ root: loader.resourcePath }),
            require('cssnano')(),
            require('postcss-cssnext')(),
          ]
        }
      },
      'sass-loader',
    ]
}
...

Проблема в том, что когда я использую cssnext функции, такие как gray(100), выходной файл CSS имеет пустойзначение, в котором была размещена функция.Я хотел бы знать, что я сделал не так здесь.

то есть background-color: gray(100); выводит на background-color: ;

Я новичок в postcss, поэтому пока не знаю, как это работает или как правильно его настроить.

1 Ответ

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

Для вашей конкретной задачи, функции cssnext, вы должны поставить cssnano после postcss-cssnext, как показано ниже: 

...
{
    test: /\.s?css$/,
    use: [
      'style-loader',
      { loader: 'css-loader', options: { importLoaders: 2 } },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: loader => [
            require('postcss-import')({ root: loader.resourcePath }),
            require('postcss-cssnext')(),
            require('cssnano')(),
          ]
        }
      },
      'sass-loader',
    ]
}
...

НО Я не знаю,почему вы использовали sass-loader?когда у вас есть postcss в вашем проекте.

На самом деле PostCSS может выполнять все работы, такие как sass, даже лучше, это зависит от вашего стиля синтаксиса, я предлагаю посмотреть THIS REPO, он имеет полную конфигурацию PostCSS на Webpack, также в этом репо используется синтаксис SCSS.

Для ясности я пишу часть конфигурации ниже: 

rules: [
    {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules\/)/,
        use: [
            {
                loader: 'babel-loader',
            }
        ]
    },
    {
        test: /\.pcss$/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                        importLoaders: 1,
                        localIdentName: '[hash:base64:10]',
                        sourceMap: false,
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        config: {
                            path: `${__dirname}/../postcss/postcss.config.js`,
                        }
                    }
                }
            ]
        })
    }
]

Даже если я использую *.pcss вместо *.scss, *.sass или *.css, это просто для согласованности и не отличается.

Конфигурация PostCSSнаходится в отдельном файле, это: 

module.exports = {
    ident: 'postcss',
    syntax: 'postcss-scss',
    map: {
        'inline': true,
    },
    plugins: {
        'postcss-partial-import': {
            'prefix': '_',
            'extension': '.pcss',
            'glob': false,
            'path': ['./../src/styles']
        },
        'postcss-nested-ancestors': {},
        'postcss-apply': {},
        'postcss-custom-properties': {},
        'postcss-nested': {},
        'postcss-cssnext': {
            'features': {
                'nesting': false
            },
            'warnForDuplicates': false
        },
        'postcss-extend': {},
        'css-mqpacker': {
            'sort': true
        },
        'autoprefixer': {
            'browsers': ['last 15 versions']
        },
    }
};

Абсолютно cssnext работает хорошо, я использовал функцию color(), и она работает хорошо.

...