0

尝试从 Vue 组件中的相对路径加载 SCSS 文件失败。

配置详情：

使用"mochapack": "^2.1.2",

使用"sass-loader": "^10.2.0",

使用

$  node -v
v14.17.0

webpack.config-test.js：

const nodeExternals = require('webpack-node-externals');
const { VueLoaderPlugin } = require('vue-loader');
const { alias } = require('./webpack.config.js'); // webpack.config.js is our main, this config is for testing.

module.exports = {
    target: 'node', // webpack should compile node compatible code
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    {
                        loader: 'vue-style-loader',
                        options: {
                            sourceMap: true,
                            sourceMapContents: false
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            sourceMapContents: false
                        }
                    },
                    'resolve-url-loader',
                    'sass-loader',
                ]
            }
        ]
    },
    resolve: {
        alias: {
            ...alias
        },
        extensions: ['.js', '.vue']
    },
    plugins: [
        new VueLoaderPlugin(),
    ]
};

如您所见，尝试根据webpack 推荐使用 URL 重写仍然失败。

错误：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
    ╷
126 │ @forward "../settings.scss";
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵

调试尝试：

检查 settings.scss 是否有错误，即使文件为空，它仍然无法找到它。

它def与相对路径有关，但是应该解决的插件似乎不起作用。我希望这只是我没有正确使用它。但我听从了他们的指示。

4

0 回答 0