Question

使用sass-loader我可以通过添加如下所示的另一个入口点来按预期编译scss。

entry: ['./src/assets/scripts/main.js', './src/assets/styles/_main.scss'],

但是，我想我可以使用sass-loader选项includePaths定义我的源文件的路径，如下所示。

const path = require('path');

options: {includePaths: ['path.resolve(__dirname, "src/assets/styles")']}

这似乎不起作用。我误解了吗？另外，像我一样添加一堆入口点是否有缺点。感谢。

已更新

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

const config = {
    entry: './src/assets/scripts/main.js',
    output: {
        path: path.resolve(__dirname, 'dist/scripts'),
        filename: 'main.js'
    },
    module: {
        rules: [
          {
            test: /\.scss$/,
            //include: [ path.resolve(__dirname, 'src/assets/styles') ],
            use: ExtractTextPlugin.extract({
            //fallback: 'style',
                        use: [{
                          loader: 'css-loader', // translates CSS into CommonJS modules
                        },  {
                          loader: 'sass-loader', // compiles Sass to CSS
                                        options: {
                       includePaths: [path.resolve(__dirname, "src/assets/styles")]
                }
                        }]

                })
          }
        ]
    },

    plugins: [  
        new ExtractTextPlugin('styles.css')
    ]
};

module.exports = config;

Answer 1

您理解正确，includePaths指定可以@import scss文件的目录。

我想您必须删除配置中的引号：

options: {includePaths: [path.resolve(__dirname, "src/assets/styles")]}

定义scss文件的路径

1 个答案: