Webpack - как скомпилировать scss в отдельный файл css?

Я хочу использовать запись - materialize.scss (которая импортирует много других файлов scss) и скомпилировать ее в отдельный вывод - ---- +: = 1 =: + ---- file.

Как именно это сделать с помощью Webpack?

Я пробовал миллион различных настроек с materialize.min.css и extract-text-webpack-plugin, css, style

7 голосов | спросил Ivan Ash 1 22016vEurope/Moscow11bEurope/MoscowTue, 01 Nov 2016 11:29:26 +0300 2016, 11:29:26

2 ответа


0

Это файл webpack.config.js, который я использовал, когда пытался скомпилировать CSS в отдельный файл

|-- App 
    |-- dist
    |-- src
        |-- css
            |-- header.css
        |-- sass
            |-- img
            |-- partials
                |-- _variables.scss
            |-- main.scss
        |--ts
            |-- tsconfig.json
            |-- user.ts
        |-- main.js
    |-- app.js
    |-- webpack.config.js


var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractCss = new ExtractTextPlugin("css/style.css");
var autoprefixer = (require("autoprefixer"))({ browsers: ['last 2 versions'] });
var precss = require("precss");
var sugarss = require('sugarss');
var colormin = require('postcss-colormin');
var path = require("path");

module.exports = {
    entry: {
        app: ['./src/sass/main.scss', './src/main.js']
    },
    //devtool:"source-map",
    output:{
        filename: "bundle.js",
        path: path.resolve(__dirname,"dist"),
        publicPath: "/dist/"
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
    },
    module:{
        loaders:[
            {
                test:/\.s?(a|c)ss$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract("css!postcss!sass")
            },/*
            {
                test:/\.css$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader", "postcss-loader","precss")
            },*/
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            },
            {
                test: /\.ts$/,
                loader: 'ts-loader'
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("bundle.css")
    ],
    postcss: function(){
      return {
        plugins: [ autoprefixer, precss ]
      }
    }
}
ответил Yves Kipondo 2 32016vEurope/Moscow11bEurope/MoscowWed, 02 Nov 2016 05:44:15 +0300 2016, 05:44:15
0

Предпосылка

  • CSS-погрузчик
  • узел-Sass литий>
  • пререкаться-погрузчик
  • стиль-погрузчик
  • экстракт текста WebPack-плагин

$ npm install css-loader node-sass sass-loader style-loader extract-text-webpack-plugin --save-dev

webpack.config.js

Это моя демонстрация webpack.config.js, измените путь в зависимости от структуры вашего проекта:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

const srcPath = path.join(__dirname, 'src');
const dstPath = path.join(__dirname, 'dst');

const sassLoaders = [
    'css-loader?minimize',
    'sass-loader?indentedSyntax=sass&includePaths[]=' + srcPath
];

module.exports = {
    entry: {
        client: './src/js/client'
    },
    module: {
        loaders: [
            /*README:https://github.com/babel/babel-loader*/
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015'],
                    cacheDirectory: true
                },
                plugins: ['transform-runtime']
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
            },
            {
                test: /\.(png|jpg|bmp)$/,
                loader: 'url-loader?limit=8192'
            }
        ]
    },
    output: {
        path: dstPath,
        filename: '[name].js'
    },
    plugins: [
        new ExtractTextPlugin('[name].min.css')
    ]
};

И демонстрационный проект на GitHub.

ответил liuwenzhuang 2 32016vEurope/Moscow11bEurope/MoscowWed, 02 Nov 2016 05:09:33 +0300 2016, 05:09:33

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132