Question

我在这里的目标是采用gulp构建的东西并使之在webpack中工作。我要做的工作的简要分解是合并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答案之后，我尝试了很多其他方法。目前，我正在尝试在谷歌搜索时发现的this解决方案。

这是我当前的webpack配置：

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文件按预期显示。我猜我对webpack不太了解，这里还有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

将scss编译为css文件没有任何作用

0 个答案: