定义 scss 文件的路径

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 文件的路径

Defining path to scss files

webpack

sass-loader