如何在 vue 组件中编译模块 scss？（laravel混合）答案

【问题标题】：How to compile module scss in vue component? (laravel-mix)如何在 vue 组件中编译模块 scss？（laravel混合）
【发布时间】：2019-09-02 22:52:27
【问题描述】：

我尝试在 laravel 项目中配置 webpack 文件。并且面对没有 lang="scss" 属性模块化 css 工作正常的情况，但我需要使用 SCSS。我不明白编译模块化 scss 需要做什么。我该如何配置？

Webpack 配置：

 module: {
        rules: [
            {
                test: /\.css$/,
                loaders: [
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            localIdentName: '[local]_[hash:base64:8]',
                        },
                    },
                ],
            },
        ],
    },

Vue 组件：

<div :id="$style['requests-container']"...

<style lang="scss" scoped module>
#requests-container {
    z-index: 10000;
    position: fixed;
    min-width: 100px;
    top: 50px;
    left: 50%;
    padding: 10px;
    background-image: linear-gradient(-225deg, #A8BFFF 0%, #c15cbe 100%);
    border-radius: 10px;
    transform: translateX(-50%);
    box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2),
    0 7px 10px 1px rgba(0, 0, 0, 0.14),
    0 2px 16px 1px rgba(0, 0, 0, 0.12);
}...

【问题讨论】：

你有没有试过为*.scss文件添加一个webpack规则，里面有css-loader和sass-loader？
是的，但是会出现很多错误。 *模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）：
我不明白我需要做什么。当我使用 vue-cli 创建一个新项目时，一切都很好，因为它是自动配置的，但是我如何在 laravel 项目中配置 scss 模块 - 我找不到解决方案。

标签： vue.js sass laravel-mix css-modules

【解决方案1】：

目前，我使模块化 scss 工作，但常规 scss 已停止工作。 “范围” - 包括。

webpack.mix.js

mix.extend('rewriteRules', webpackConfig => {
let scssRule = webpackConfig.module.rules.find(rule => String(rule.test) === '/\\.scss$/');

scssRule.loaders[1] = { /* css-loader */
    loader: 'css-loader',
    options: {
        modules: true,
        importLoaders: 1,
        localIdentName: '[name]_[local]_[hash:base64:4]'
    }
};
});

mix.rewriteRules();

如果有人帮助恢复非模块化 sass 的操作，我将不胜感激。

【讨论】：