Vue-cli 3.0使用遇到的问题记录(未整理)

vue3.0使用全局scss

h2

h3

首先创建一个scss文件

 

 

接着在项目根目录下创建 vue.config.js

 

vue.config.js内容

注意这段代码

  css: {
        loaderOptions: {
            // 给 sass-loader 传递选项
            sass: {
                // @/ 是 src/ 的别名
                // 所以这里假设你有 `src/assets/css/varuables.scss` 这个文件
                data: `@import "@/assets/css/varuables.scss";`
            }
        }
    },

 

1. module.exports = {

2. // 项目部署的基础路径

3. // 我们默认假设你的应用将会部署在域名的根部，

4. // 比如 https://www.my-app.com/

5. // 如果你的应用时部署在一个子路径下，那么你需要在这里

6. // 指定子路径。比如，如果你的应用部署在

7. // https://www.foobar.com/my-app/

8. // 那么将这个值改为 `/my-app/`

9. baseUrl: '/',

10.  

11. // 将构建好的文件输出到哪里

12. outputDir: 'dist',

13.  

14. // 是否在保存的时候使用 `eslint-loader` 进行检查。

15. // 有效的值：`ture` | `false` | `"error"`

16. // 当设置为 `"error"` 时，检查出的错误会触发编译失败。

17. lintOnSave: true,

18.  

19. // 使用带有浏览器内编译器的完整构建版本

20. // 查阅 https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时

21. // compiler: false,

22. runtimeCompiler: true, //关键点在这

23. // 调整内部的 webpack 配置。

24. // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md

25. chainWebpack: () => {},

26. configureWebpack: () => {},

27.  

28. // vue-loader 选项

29. // 查阅 https://vue-loader.vuejs.org/zh-cn/options.html

30. // vueLoader: {},

31.  

32. // 是否为生产环境构建生成 source map？

33. productionSourceMap: true,

34.  

35. // CSS 相关选项

36. css: {

37. // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)

38. extract: true,

39.  

40. // 是否开启 CSS source map？

41. sourceMap: false,

42.  

43. // 为预处理器的 loader 传递自定义选项。比如传递给

44. // sass-loader 时，使用 `{ sass: { ... } }`。

45. loaderOptions: {},

46.  

47. // 为所有的 CSS 及其预处理文件开启 CSS Modules。

48. // 这个选项不会影响 `*.vue` 文件。

49. modules: false

50. },

51.  

52. // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`

53. // 在多核机器下会默认开启。

54. parallel: require('os').cpus().length > 1,

55.  

56. // 是否使用 `autoDLLPlugin` 分割供应的包？

57. // 也可以是一个在 DLL 包中引入的依赖的显性的数组。

58. // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#dll-模式

59. // dll: false,

60.  

61. // PWA 插件的选项。

62. // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli-plugin-pwa/README.md

63. pwa: {},

64.  

65. // 配置 webpack-dev-server 行为。

66. devServer: {

67. open: process.platform === 'darwin',

68. host: '0.0.0.0',

69. port: 8081,

70. https: false,

71. hotOnly: false,

72. // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理

73. proxy: null, // string | Object

74. before: app => {

75. // `app` 是一个 express 实例

76. }

77. },

78. css: {

79. loaderOptions: {

80. // 给 sass-loader 传递选项

81. sass: {

82. // @/ 是 src/ 的别名

83. // 所以这里假设你有 `src/assets/css/varuables.scss` 这个文件

84. data: `@import "@/assets/css/varuables.scss";`

85. }

86. }

87. },

88. // 三方插件的选项

89. pluginOptions: {

90. // ...

91. }

92. }

 

这样直接可以在任何地方使用scss了

---