компиляция scss в css файл ничего не делает - PullRequest
Новая
       4

компиляция scss в css файл ничего не делает

0 голосов
/ 05 ноября 2019

Моя цель - взять что-то, что я встроил в gulp, и заставить его работать в веб-пакете. Краткое описание того, что я пытаюсь сделать, - это включить atomic scss , который, по сути, берет кучу различных файлов scss и импортирует их. Gulp делает свое дело, и он сплевывает результат в файл CSS. Вот пример моего файла scss: 

// atomic.scss
@import "config/variables";
@import "config/agriedge";
@import "../../../node_modules/atomic-scss/scss/atomic";
@import "config/breakpoints";
@import "components/Modal/Modal";
@import "components/Pill/Pill";
@import "components/Toggle/Toggle";
@import "site/helpers";
@import "config/atomic-variables";
@import "components/ListView/ListView";

и с gulp я выполнил следующую команду: 

var paths = {
  'sass': './client/assets/scss/**/*.scss',
  'css': './client/assets/css/',
  'atomicCss': './client/assets/css/atomic.css',
  'allCss': './client/assets/css/*.css'
};

gulp.task('sass', function () {
  return gulp.src(paths.sass)
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(autoprefixer({
      browsers: ['last 2 versions']
    }))
    .pipe(gulp.dest(paths.css));
});

Так что теперь я хочу сделать это в Webpack, который после просмотра многих Stackoverflowответы я пробовал кучу разных вещей. В настоящее время я пытаюсь это решение, которое я нашел во время поиска в Google.

Вот моя текущая конфигурация веб-пакета: 

plugins = [
    new ExtractTextPlugin('[name].css'),
    // Make sure this is after ExtractTextPlugin!
    new PurifyCSSPlugin({
        // Give paths to parse for rules. These should be absolute!
        paths: glob.sync(path.join(__dirname, 'client/views/layouts/*.jsx')),
    }),
    new webpack.DefinePlugin({
        "process.env": JSON.stringify(dotenv.config().parsed)
    })
]

let config = {
    mode: 'development',
    node: {
        fs: "empty"
    },
    entry: [
        '@babel/polyfill',
        './client/app.js',
        './client/assets/scss/atomic.scss'
    ],
    output: {
        path: __dirname + '/client/assets/js',
        publicPath: '/',
        filename: 'main.js'
    },
    module: {
        rules: [
            // ... irrelevant logic ...
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'css/[name].css',
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader?-url'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ],
    },
    // ... irrelevant logic ...
    plugins,
};

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

|- root
|- package.json
|- client
|- webpack.config.js
|-- assets
|---- css
|---- js
|---- images
|----  scss
|------ atomic.scss
|------ site.scss
|------ components
|--------- ... all my components
|------- config
|--------- ... all my configs
|-------- site
|--------- ... all my site level stuff
...