Как настроить sass-загрузчик для производства только CSS из SCSS - PullRequest
Новая
       21

Как настроить sass-загрузчик для производства только CSS из SCSS

0 голосов
/ 27 сентября 2018

Я пытаюсь использовать 2 модуля в webpack.config. Наряду с сборкой js bundle, я хотел бы создать CSS для веб-страницы, но всегда получаю ошибку 

ERROR in ./src/sass/company-style.scss 1:3
    Module parse failed: Unexpected token (1:3)
    You may need an appropriate loader to handle this file type.
    > h1 {
    |   color: #c43f4c; }

company-style.scss 

$myred: #c43f4c;
h1 {
  color: $myred;
}

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

webpack.config.js 

const path = require('path')
var config = {
    // common Configuration
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                }
            }
            ,{
                test: /\.scss$/,
                use: [{
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader'
                }, {
                    loader: 'sass-loader'
                }]
            }

            ,{
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader'
                    }
                ]
            }
        ]
    }

};

var bundleConfig = Object.assign({}, config, {
    name: "js-bundle",
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
});
var cssConfig = Object.assign({}, config,{
    name: "css-bundle",
    entry: "./src/sass/company-style.scss",
    output: {
        filename: "company-style.css",
        path: path.resolve(__dirname, 'dist')
    },

    module: {
        rules: [
            {
                test: /\.scss$/,
                exclude: /(node_modules|bower_components)/,
                /*use: [{
                    loader: 'sass-loader'
                }]*/
                use: ['sass-loader']
            }
        ]
    }
});
module.exports = [
    bundleConfig, cssConfig
];

Нет проблем с bundleConfig модулем.Bundle.js построен и работает

Ответы [ 2 ]

0 голосов
/ 27 сентября 2018

Если я правильно понял вопрос, вы хотели бы создать отдельный файл CSS из файла SCSS.

Взгляните на mini-css-extract-plugin . 

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    })
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      }
    ]
  }
}
0 голосов
/ 27 сентября 2018

Я никогда не видел в списке комбинированных загрузчиков, вы пробовали что-то подобное? 

use: ['style-loader','css-loader', 'sass-loader']
...