2

我想用 webpack 编译 scss 和 js。但是，只要我将它与 Symfony 3 一起使用，其中只有前端的某些页面使用 javascript 组件，我想将 css 编译为独立文件并使用老式<link href="style.css">而不是将 (s)css 导入到 javascript 模块中。

我设法用以下webpack.config.js我应该生产的js/script.js和来做到这一点css/style.css。它有效，但它也产生js/style.js了我不需要也不想要的东西。我想问题是条目“样式”也会产生输出 JS，即使它是由 ExtractTextPlugin 处理的，但是如何告诉 webpack 不要为条目产生 javascript 输出呢？

我还尝试不使用多个入口点，并使用 index.js 将 main.scss 添加到一个入口点列表中。它当然没有产生额外的文件，但是转译的 script.js 包含对 main.scss 的引用，这是我不想要的。我想要一个完全独立于脚本来管理样式的纯解决方案。

const path = require('path');
const outputPath = path.join(__dirname, '..', 'www');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    devtool: 'source-map',
    entry: {
        script: ['./src/js/index.js'],
        style: ['./src/scss/main.scss']
    },
    target: 'web',
    output: {
        filename: 'js/[name].js',
        path: outputPath
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [
            { // sass / scss loader for webpack
                test: /\.(sass|scss)$/,
                loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({ // define where to save the file
            filename: 'css/[name].css',
            allChunks: true,
        })
    ]
};
4

1 回答 1

1

Webpack 似乎总是需要一个源代码文件来引入外部样式，无论是 CSS 还是 Sass——我认为无论如何都没有办法解决这个问题。如果您只想将那些已编译的 css 样式文件导入到您的应用程序中并且不希望有关联的 .js 文件，那么只需使用node-sass编译器并构建一个 .css 文件。然后使用 webpack css 加载器通过 webpack 将其引入您的应用程序，或者您可以在 html 文件中手动引用它。

否则只有一个 js 文件，其中包含一个 Sass 样式的导入，然后在构建后将其删除。无论哪种方式，您都将获得相同的 css。

于 2017-08-22T15:08:59.800 回答